Highcharts и Yii2

Захотелось внедрить графики. Выбор пал на Highcharts (ещё есть AmCharts и Google Chart).

Использовал расширение yii-highcharts-widget.

Про настройки написано всё в документации - https://api.highcharts.com/highcharts/

Использую Highstock из всей библиотеки Highcharts, так как рисую временные графики и Highstock более заточен для оси времени.

Вот мои настройки на данный момент. Русские надписи для осей и для кнопок масштаба приходится вручную в настройках указывать. Чтобы несколько графиков показать, пишем несколько массивов для оси yAxis, и ниже в series указываем для какого набора данных какая ось.

use miloschuman\highcharts\Highstock;
use yii\web\JsExpression;
use miloschuman\highcharts\SeriesDataHelper;

echo Highstock::widget([
            'scripts' => [
                'modules/exporting',
                //'themes/grid-light',
            ],
            'setupOptions' => [
                'lang' => [
                    'loading'=> 'Загрузка...',
                    'months'=> ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
                    'weekdays'=> ["Воскресенье", "Понедельник", 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
                    'shortMonths'=> ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
                    'exportButtonTitle'=> "Экспорт",
                    'printButtonTitle'=> "Печать",
                    'rangeSelectorFrom'=> 'С',
                    'rangeSelectorTo'=> "По",
                    'rangeSelectorZoom'=> "Период",
                    'downloadPNG'=> 'Скачать PNG',
                    'downloadJPEG'=> 'Скачать JPEG',
                    'downloadPDF'=> 'Скачать PDF',
                    'downloadSVG'=> 'Скачать SVG',
                    'printChart'=> 'Напечатать график'
                ],
            ],
            'options' => [
                'credits' => ['enabled' => false],
                'chart'=>['height'=>'500px'],
                'rangeSelector'=> [
                        //'selected'=> 1,
                        'buttons'=> [[
                            'type'=> 'month',
                            'count'=> 1,
                            'text'=> '1мес'
                        ], [
                            'type'=> 'month',
                            'count'=> 3,
                            'text'=> '3мес'
                        ], [
                            'type'=> 'month',
                            'count'=> 6,
                            'text'=> '6мес'
                        ], [
                            'type'=> 'ytd',
                            'text'=> 'YTD'
                        ], [
                            'type'=> 'year',
                            'count'=> 1,
                            'text'=> '1год'
                        ], [
                            'type'=> 'all',
                            'text'=> 'Всё'
                        ]]
                ],
                'title' => ['text' => $exercisename],
                /*'subtitle'=> [
                    'text'=> 'Тренировка:The subtitle'
                ],*/
                'xAxis' => [
                    'type'=> 'date',
                    'crosshair' => true,
                    'ordinal'=> false,
                    'title' => [
                        'text' => 'Дата'
                    ]
                ],
                'yAxis' => [
                    [
                        'labels'=> [
                            'align'=>'right',
                        ],
                        'title' => [
                            'text' => 'Результат',
                            'margin'=> 20,
                        ],
                        'height'=>'75%',
                        'lineWidth'=> '1',
                        'resize'=> [
                            'enabled'=> true
                        ]
                    ],
                    [
                        'labels'=> [
                                'align'=>'right',
                                'x'=> '-3'
                        ],
                        'title' => [
                            'text' => 'Просрочка',
                            'margin'=> 20,
                        ],
                        'top'=>'77%',
                        'height'=>'25%',
                        'offset'=>0,
                        'lineWidth'=> '1',
                        'reversed'=> true,
                        'showFirstLabel'=> false,
                        'showLastLabel'=> true
                    ],
                ],
                'tooltip'=> ['split'=>true],
                'series' => [
                    [
                        'type' => 'areaspline',
                        'name' => 'Результат',
                        'data' => new SeriesDataHelper($dataProvider, ['date:timestamp', 'result:float']),
                        'yAxis' => 0,
                        'marker' => [
                            'enabled'=> true,
                            'radius'=> 3,
                            'states'=>['hover'=>['radius'=>2]],
                        ],
                        'dataLabels'=> [
                            'enabled'=>true,
                        ],
                    ],
                    [
                        'type' => 'area',
                        'name' => 'Просрочка (дней)',
                        'data' => new SeriesDataHelper($dataProvider, ['date:timestamp', 'days_overdue:int']),
                        'yAxis' => 1,
                    ],
                ],
            ]
        ]); ?>

И дам ссылку на внятную статью про настройку Highcharts - http://unboxit.ru/blog/63-risuem-grafiki-highchart...

27 июля 2018, Программирование, веб-кодинг / Метки: графики