chartjs-在整数x轴值上绘制垂直线 [英] chartjs - Drawing vertical line on integer x axis value

问题描述

在下面的示例中，chartjs注释使用字符串值（ MAR ），但不使用整数值。如何在一些整数x轴值上绘制一条垂直线。

In the below example, the chartjs annotation works with a string value ("MAR"), but not with an integer value. How do I draw a vertical line on some integer x-axis value.

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

推荐答案

您可以通过将数据作为点来实现，并配置 xAxes 作为 linear 和创建自定义刻度格式：

You can achieve your goal passing data as points, configuring xAxes as linear and 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

Check the CodePen updated: https://codepen.io/beaver71/pen/XVZXOM

这篇关于chartjs-在整数x轴值上绘制垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！