时间戳

首页 > 解决方案 > 是否可以在 chartJs 上为不同的 yAxis 间隔创建不同的步长？

javascript - 是否可以在 chartJs 上为不同的 yAxis 间隔创建不同的步长？

问题描述

我有一个如下图

在此处输入图像描述

正如您所看到的，从 0 开始并且stepSize是 0.1，但我希望它重新开始0并直接打印0.7，然后继续执行每个0.1步骤。在这里你可以看到下面的预期

在此处输入图像描述

这是我做的ticks配置yAxis

ticks: {
  min: 0,
  // forces step size to be 5 units
  stepSize: 0.1
}

我需要类似stepSize:0.7（0-0.7 之间）的东西，然后0.1如果大于.Unfortunately0.7我没有机会像这样实现。有没有其他选择？

Codepen 演示：https ://codepen.io/Cicek96/pen/vYGVwmy

标签： javascriptchart.js

解决方案

ticks您可以通过如下定义来伪造零线的刻度：

ticks: {
  min: 0.65,
  stepSize: 0.1,
  callback: (value, index, values) => index + 1 == values.length ? 0 : value
}

如需进一步解释，请查看从 Chart.js 文档创建自定义刻度格式。

请看一下下面的可运行代码，看看它是如何工作的。

new Chart(document.getElementById("myChart"), {
    type: "line",
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "APAC RE index",
            data: [0.7, 0.8, 0.9, 1, 0.9, 0.8, 0.7],
            fill: false,
            borderColor: "rgb(255, 0, 0)"
        }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 0.65,
            stepSize: 0.1,
            callback: (value, index, values) => index + 1 == values.length ? 0 : value
          }
        }]
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

推荐阅读