CanvasJS 具有单独缩放的 Y 轴

Question

我对 CanvasJS 还是有点陌生，但我一直在努力解决的一件事是尝试为样条图表中的每条线单独缩放 Y 轴。

我希望有人能指出我所缺少的东西。到目前为止，我已经花了一天的时间来解决这个问题，但还没有取得多大进展。我希望这是一件小事。

window.onload = function () {

        var chart = new CanvasJS.Chart("timeline", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "Bowling stats over time"
    },
    toolTip: {
        shared: true
    },
    legend: {
        cursor: "pointer",
        itemclick: toggleDataSeries
    },
    data: [{
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Pinfall",
        yAxisID: 'y2',
        dataPoints: [
            { label: "2023-12-07", y: 151 },
            { label: "2023-12-11", y: 103 },
            { label: "2023-12-14", y: 156 },
            { label: "2023-12-15", y: 132 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Strikes",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 2 },
            { label: "2023-12-11", y: 1 },
            { label: "2023-12-14", y: 4 },
            { label: "2023-12-15", y: 2 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Spares",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 4 },
            { label: "2023-12-11", y: 1 },
            { label: "2023-12-14", y: 2 },
            { label: "2023-12-15", y: 3 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##.00",
        name: "First Throw Avg",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 8.7 },
            { label: "2023-12-11", y: 6.4 },
            { label: "2023-12-14", y: 7.9 },
            { label: "2023-12-15", y: 7.7 }
        ]
    }],
    responsive: true,
  options: {
    scales: {
      yAxes: [{
        id: 'y',
        stacked: false,
        position: 'left',
        type: 'linear',
        scaleLabel: {
          display: true,
        }
      }, {
        id: 'y2',
        stacked: false,
        position: 'right',
        type: 'linear',
        scaleLabel: {
          display: true,
        }
      }]
    }
  }
});
chart.render();

    function toggleDataSeries(e) {
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
            e.dataSeries.visible = false;
        } else {
            e.dataSeries.visible = true;
        }
        chart.render();
    }
}

https://jsfiddle.net/0mp3gkyz/

在我的示例代码中，我只是尝试使用两个单独的 yAxis 控件进行测试，但理想情况下，我希望每行都有单独的缩放访问。

Answer 1

您的代码基本上使用

CanvasJS

但不使用

Chart.js

。

new CanvasJS.Chart("timeline", {
   ...
}

然而，

部分图表配置（特别是

options

）是从

Chart.js

借来的。请注意，这些是不同的产品，各自具有自己的语法。

要解决您的问题，请查看

CanvasJS

操作方法页面 使用以下命令创建图表 多个 Y 轴。