chartjs - 在整数 x 轴值上绘制垂直线答案

【问题标题】：chartjs - Drawing vertical line on integer x axis valuechartjs - 在整数 x 轴值上绘制垂直线
【发布时间】：2018-01-09 17:35:55
【问题描述】：

在下面的示例中，chartjs 注释适用于字符串值 ("MAR")，但不适用于整数值。如何在某个整数 x 轴值上绘制垂直线。

var chartData = {
  labels: ["JAN", "FEB", "MAR"],
  datasets: [
    {
      data: [12, 3, 2]
    }
  ]
};

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: chartData,
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: 2,
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  });
};

见小提琴：https://codepen.io/anon/pen/QaQWba

【问题讨论】：

标签： chart.js

【解决方案1】：

您可以将数据传递为points，将xAxes 配置为linear 和creating a custom tick format，从而实现您的目标：

数据：

var chartData = {
  labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
  datasets: [
    {
      data: [{x: 1, y: 12}, {x: 2, y: 3}, {x: 3, y: 2}, {x: 4, y: 1}, {x: 5, y: 8}, {x: 6, y: 8}, {x: 7, y: 2}, {x: 8, y: 2}, {x: 9, y: 3}, {x: 10, y: 5}, {x: 11, y: 11}, {x: 12, y: 1}];
    }
  ]
};

xAxes 配置：

xAxes: [{
  type: 'linear',
  position: 'bottom',
  ticks: {
        max: 12,
        min: 1,
        stepSize: 1,
        callback: function(value, index, values) {
             return chartData.labels[index];
        }
   }
}]

检查 CodePen 更新：https://codepen.io/beaver71/pen/XVZXOM

【讨论】：