Javascript 自定义刻度并缩放图形以使其匹配-Chartjs

我希望能够创建一个带有自定义记号的图形，我已经完成了。然而，尽管我想要相反的结果，但我希望图形能够缩放到刻度。换句话说，我希望在我所有的滴答声之间有一个均匀的空间

有人知道我怎么解决这个问题吗

代码如下：

JavaScript:

var ticks = [11000, 10000, 7000, 3000, 1000, 500, 100];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [{
      data: [6000, 5000, 8000, 2000, 10000, 3500, 6000, 2000, 4000, 6000]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          autoSkip: false,
          min: ticks[ticks.length - 1],
          max: ticks[0]
        },
        afterBuildTicks: function(scale) {
          scale.ticks = ticks;
          return;
        },
        beforeUpdate: function(oScale) {
          return;
        }
      }]
    }
  }
});

HTML

您的图表在我看来是正确的。因为滴答声的间隔不同，所以滴答声之间的间隔相等是没有意义的。例如，前两个刻度之间的间距为400，而第三个和第四个刻度之间的间距为2000（比前两个刻度大5倍）。有道理吗？是的。。。但我希望能够将图表一分为二，因为我有一些数据在1000年代，而其他数据的范围在0-10之间。这些必须在同一个图表上，但我需要它，以便可以区分0-10范围内的数据点。希望你能明白我的困境，这是有道理的：）我明白你的意思。不幸的是，chart.js无法做到这一点，我也无法考虑在chart.js之上构建它（我已经对chart.js进行了大量定制）。对此很抱歉：（对于任何可能遇到这种情况的人：我认为可以使用两个单独的Y轴来做类似的事情。Chart.js将把所有的线都画在一起（事实上是相互重叠的）但是，将每条线按其所关联的轴进行缩放。如果每条线的值范围很广，则不起作用，但对于必须在同一图形上同时显示这两条线的单独线，则可能会起作用。我认为您的图形看起来是正确的。因为您的刻度间隔不同，所以刻度之间的间距相等是没有意义的。例如，间距前两个刻度之间的间距为400，但第三个刻度和第四个刻度之间的间距为2000（比前两个刻度大5倍）.有意义吗？是的……但我希望能够将图表一分为二-因为我有一些数据在1000年代，还有一些数据在0-10之间。这些数据必须在同一个图表上，但我需要它，以便可以区分0-10之间的数据点。希望你能看到我的困境，这是有意义的：）我明白你的意思。不幸的是，chart.js无法做到这一点，我也无法考虑在chart.js之上构建它（我已经对chart.js进行了大量定制）。对此很抱歉：（对于任何可能遇到这种情况的人：我认为可以使用两个单独的Y轴来做类似的事情。Chart.js将把所有的线都画在一起（事实上是相互重叠的）但是，将每条线缩放到它所绑定的轴。如果每条线都有一个大范围的值，这将不起作用，但是对于必须在同一个图形上同时显示这两条线的单独的线，这可能会起作用。

<canvas id="myChart" width="400" height="400"></canvas>