如何在 chart.js 中指定刻度位置？

Question

我正在寻找一种在 chart.js 图表上手动指定 x/y 刻度位置的方法，相当于 matplotlib 的 matplotlib.pyplot.xticks. The documentation explains how to create custom tick formats，但这适用于自动计算的刻度位置。如何指定刻度位置？

这是我正在使用的配置：

var config = {
    type: "line",
    data: {
        labels: [],
        datasets: [{
            data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
            fill: false,
            borderColor: "#1f77b4",
        }],
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                distribution: 'series',
                ticks: {
                    min: 0.,
                    max: 7.,
                },
            }]
        },
    },
}

生成此文件：

我想指定 xticks 位置，例如[0., 3.5, 5.7, 6.1]，这样情节看起来更像（不考虑网格线和平滑情节线）：

Answer 1

为了不在图表上绘制网格线，您需要按照 Grid Line Configuration.

中的说明将以下内容添加到轴中

gridLines: {
  drawOnChartArea: false 
}

为了仅在所需位置获得刻度，您可以如下所示定义 xAxis.ticks 并记录在 Tick Option and Creating Custom Tick Formats.

ticks: {
  ...       
  stepSize: 0.1,
  autoSkip: false,
  callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
  maxRotation: 0
},

最后，要获得数据点之间的直线，请按照 Line Styling 中的说明在数据集上定义 lineTension: 0。

请查看下面您修改后的代码。

var config = {
  type: "line",
  data: {
    labels: [],
    datasets: [{
      data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
      fill: false,
      lineTension: 0,
      borderColor: "#1f77b4",
    }],
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0.,
          max: 7.,          
          stepSize: 0.1,
          autoSkip: false,
          callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
          maxRotation: 0
        },
        gridLines: {
          drawOnChartArea: false
        }
      }],
      yAxes: [{
        ticks: {
          showLabelBackdrop: true
        }, 
        gridLines: {
          drawOnChartArea: false
        }
      }]
    },
  },
};

new Chart('line-chart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

Answer 2

显然对于 Chart.js v3，接受的解决方案不再按预期工作。按照 b1000 在他的评论中的建议尝试 afterBuildTicks，它也没有用。

要使其与 afterBuildTicks 一起使用，您需要将数字值映射到每个具有属性 value ([{ value: 0 }, { value: 3.5 }, ... ]) 的对象中。这可以按如下方式完成：

afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v }))

请看下面的可运行示例：

new Chart('line-chart', {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
      showLine : true,
      borderColor: '#1f77b4',
    }]
  },
  options: {
    scales: {
      x: {    
        min: 0,
        afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v })) 
      }
    }
  }
});

canvas {
  max-height: 180px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="line-chart"></canvas>

如何在 chart.js 中指定刻度位置？

How to specify ticks locations in chart.js?

charts

location

chart.js