Chartjs-背景网格-多个y轴

时间:2019-11-28 09:59:21

标签: chart.js chartjs-2.6.0

我在“ Chartjs二维轴” 网格上遇到问题。有两个具有不同数据的y轴。我想将左y轴和右y轴对齐到背景网格只有大小相同的框的高度(如第二个屏幕截图所示)。

1 Picture - How the background grid looks like

2 Picture - How the background grid should look like

以下是用于构建图形结构的数据:

      $o = [
            "type" => "line",
            "data" => [
                "labels" => [],
                "datasets" => []
            ],
            "options" => [
                "responsive" => true,
                "title" => [
                    "display" => true,
                    "text" => $map->title
                ],
                "elements" => [
                    "line" => [
                        "borderWidth" => 1.5
                    ],
                    "point" => [
                        "radius" => 2,
                        "hitRadius" => 2,
                        "hoverRadius" => 3
                    ]
                ],
                "legend" => [
                    "display" => true,
                    "" => "right",
                    "labels" => [
                        "boxWidth" => 16
                    ]
                ],
                "tooltips" => [
                    "mode" => "index"
                ],
                "scales" => [
                    "xAxes"=> [
                      "stacked"=> true
                    ],
                    "yAxes"=> [[
                      "stacked"=> true,
                      "position"=> "left",
                      "id"=> "y-axis-0",
                      "scaleLabel" => [
                        "display" => true,
                        "labelString" => $map->y1Label

                    ]
                    ], [
                      "stacked" => true,
                      "position" => "right",
                      "id"=> "y-axis-1",
                      "scaleLabel" => [
                      "display" => true,
                      "labelString" => $map->y2Label
                      ]
                    ]]
                ]
            ]
        ];

最诚挚的问候

0 个答案:

没有答案