Для реализации горизонтальной прокрутки (по оси X) в графиках Chart.js, используемых через виджет Yii2 от 2amigos, вам необходимо использовать опцию `scales` в настройках графика, чтобы настроить поведение оси X.
Вот шаги, которые помогут вам реализовать горизонтальную прокрутку:
1. **Убедитесь, что у вас установлена последняя версия Chart.js**, совместимая с виджетом от 2amigos. Некоторые функции могут быть недоступны в старых версиях.
2. **Настройте ось X**, чтобы включить поведение, позволяющее прокрутку. Для этого можете использовать `type: 'time'` или `type: 'category'` (в зависимости от ваших данных) и добавить свойство `min` и `max` для ограничения отображаемого диапазона.
3. **Используйте библиотеку `chartjs-plugin-zoom`**, чтобы включить возможность прокрутки. Она позволяет пользователям прокручивать и масштабировать график с помощью мыши или касаний на мобильных устройствах.
### Пример кода:
#### 1. Установка chartjs-plugin-zoom
Обязательно добавьте `chartjs-plugin-zoom` в ваш проект. Вы можете скачать его или подключить через CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
```
#### 2. Настройка виджета в Yii2
```php
use dosamigos\chartjs\ChartJs;
echo ChartJs::widget([
'type' => 'line',
'options' => [
'height' => 400,
'width' => 800,
],
'data' => [
'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
'datasets' => [
[
'label' => 'My First dataset',
'backgroundColor' => 'rgba(255, 99, 132, 0.2)',
'borderColor' => 'rgba(255, 99, 132, 1)',
'data' => [0, 10, 5, 2, 20, 30, 45],
],
],
],
'clientOptions' => [
'responsive' => true,
'maintainAspectRatio' => false,
'scales' => [
'x' => [
'type' => 'category',
'offset' => true,
'ticks' => [
'autoSkip' => false,
],
],
'y' => [
'beginAtZero' => true
],
],
'plugins' => [
'zoom' => [
'pan' => [
'enabled' => true,
'mode' => 'x',
],
'zoom' => [
'enabled' => true,
'mode' => 'x',
],
],
],
],
]);
```
### Примечания:
- Убедитесь, что вы правильно подключили `chartjs-plugin-zoom`.
- Вы можете настроить `min` и `max` значения на оси, чтобы задать диапазон, который вы хотите отображать по умолчанию.
- В зависимости от типа данных, которые у вас есть, настройки оси X могут отличаться (например, `time` для временных рядов).
- Изучите документацию Chart.js и `chartjs-plugin-zoom` для более детальной настройки и параметров.
Таким образом, следуя данным шагам, вы сможете добавить горизонтальную прокрутку к своим графикам.