ChartJS 图表,js stepSize适用于右侧Y轴,但不适用左手Y轴

pqwbnv8z  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(197)

我有一个有两个Y轴的图表,一个在左边,一个在右边。两个都有一个设置的最小值、最大值和stepSize,所以它们正好有11个刻度线。右边的Y轴似乎像预期的那样荣誉所有内容,但左边的Y轴不支持stepSize。
左手Y轴从3800到4140,这意味着如果我需要11个刻度,我应该步进34,我已经设置好了,但它实际上从3800开始,以8刻度一次,然后以34刻度继续,直到4114,最后以26刻度到达4140。我该如何停止呢?

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<body>
  <div>
    <table style="border-collapse: collapse; width: 1050px; padding-top: 10px; height: 1050px" border="0">
      <canvas id="myChart2" style="width:100%;max-width:700px"></canvas>
      <script>
        var dates = ['07/29/2022', '08/01/2022', '08/02/2022', '08/03/2022', '08/04/2022', '08/05/2022', '08/06/2022', '08/07/2022', '08/08/2022', '08/09/2022', '08/10/2022', '08/11/2022'];
        var portfolio_values = [3869.73, 3802.77, 3811.14, 3813.0, 3818.58, 3954.36, 3954.36, 3954.36, 3993.42, 3983.19, 4131.99, 4086.42];
        var sp500_values = [378.79, 377.65, 375.21, 381.07, 380.77, 379.98, 379.98, 379.98, 379.64, 378.14, 386.06, 386.43];

        new Chart("myChart2", {
          type: "line",
          data: {
            labels: dates,
            datasets: [{
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(0,0,255,1.0)",
                borderColor: "rgba(0,0,255,0.1)",
                yAxisID: "A",
                label: "Twitter",
                data: portfolio_values
              },
              {
                fill: false,
                lineTension: 0,
                backgroundColor: "rgba(255,0,0,1.0)",
                borderColor: "rgba(255,0,0,0.1)",
                yAxisID: "B",
                label: "S&P500",
                data: sp500_values
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: "Twitter vs S&P500"
            },
            legend: {
              display: true
            },
            scales: {
              yAxes: [{
                  id: "A",
                  type: "linear",
                  position: "left",
                  ticks: {
                    min: 3800,
                    max: 4140,
                    stepSize: 34.0
                  }
                },
                {
                  id: "B",
                  type: "linear",
                  position: "right",
                  ticks: {
                    min: 370,
                    max: 390,
                    stepSize: 2.0
                  }
                }
              ]
            }
          }
        });
      </script>
    </table>
  </div>
</body>

</html>
lmyy7pcs

lmyy7pcs1#

您可以尝试强制使用分笔成交点实现轴回调:

afterBuildTicks(axis, ticks) {
  axis.ticks = [];
  for (let i = axis.options.ticks.min; i<=axis.options.ticks.max; i+=axis.options.ticks.stepSize) {
    axis.ticks.push(i);
  }
}

第一个

相关问题