Question

我已经开始将Laravel Charts与chart.js一起使用。我有一个包含2个数据集的图形，但希望将这些数据集放在多轴图形上。我目前遇到的问题是在这一点上缺少文档。

这是我目前的代码：

$machine = Machine:all()->where('id', '1')->toArray();
$imestamp = array_column($machine, 'timestamp');
$totalActions = array_column($machine, 'total_actions');

$machine = Machine:all()->where('id', '2')->toArray();
$totalActions2 = array_column($machine, 'total_actions');

$totalActionsChart = new TotalActionsChart;
$totalActionsChart->labels($timestamp);
$totalActionsChart->dataset('Total Actions', 'line', $totalActions)->options([
    'borderColor' => '#003a7f',
]);
$totalActionsChart->dataset('Total Actions', 'line', $totalActions2)->options([
    'borderColor' => '#f18800',
]);

return view('machine', compact('totalOperationsChart'));

此代码仅显示具有1个y轴和2个数据集的图形。在查看laravel图表或chart.js的文档时，我找不到创建带有2个y轴的图形的示例。有人可以指出我正确的方向吗？

Answer 1

对于其他可能遇到此问题的人。在浏览了laravel图表包的代码之后，我遇到了以下return语句：

return $this->options([
            'maintainAspectRatio' => false,
            'scales'              => [
                'xAxes' => [],
                'yAxes' => [
                    [
                        'ticks' => [
                            'beginAtZero' => true,
                        ],
                    ],
                ],
            ],
        ]);

我复制了该选项数组并放入了我的数组，在y轴数组中添加y轴后，我突然有了2个y轴。经过多玩之后，我找到了解决我问题的方法。

$totalOperationsChart->options([
            'maintainAspectRatio' => false,
            'scales'              => [
                'xAxes' => [],
                'yAxes' => [ [
                            'type' => 'linear',
                            'display' => true,
                            'position' => 'left',
                            'id' => 'y-axis-1'],
                             [
                            'type' => 'linear',
                            'display' => true,
                            'position' => 'right',
                             'id' => 'y-axis-2'],
                            [
                            'ticks' => [
                                'beginAtZero' => true,
                            ],
                            'position' => 'right'],
                ],
            ],
        ]);

上面的数组是制作带有2个y轴的图表的解决方案。添加2个y轴后，可以将数据集绑定到特定的y轴。你可以这样做。

 $totalOperationsChart->dataset($chartTitle, $chartType, $dataset2)->options([
            'borderColor' => $borderColor2,
            'yAxisID' => 'y-axis-2'
        ]);

Laravel，具有多个y轴的图表

1 个答案: