在ChartJS中增加读出行的功能

Question

有没有办法在ChartJS中添加行来辅助读取一个关节值？下面是一个例子。我想在x轴上输入数字，然后让ChartJS在x轴上画线，然后从x轴与曲线相接的地方穿过。下面是一个例子。

这可能吗？

Answer 1

是的，这是可能的

你可以看看我的提琴。https：/jsfiddle.netiphong993gru4Lad614

var canvas = document.getElementById('chart');
new Chart(canvas, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      label: 'A',
      yAxisID: 'A',
      data: [100, 96, 84, 76, 69]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: 'A',
        type: 'linear',
        position: 'left',
      }, {
        id: 'B',
        type: 'linear',
        position: 'right',
        ticks: {
          max: 1,
          min: 0
        }
      }]
    },
    annotation: {
        annotations: [          
          {
            drawTime: "beforeDatasetsDraw",
            type: "box",
            xScaleID: "x-axis-0",
            yScaleID: "B",
            xMin: "3",
            xMax: "5",
            yMin: 0.3,
            yMax: 0.3,            
            borderColor: "red",
            borderWidth: 1,
            onClick: function(e) {
              console.log("Box", e.type, this);
            }            
          },
          {
            drawTime: "beforeDatasetsDraw",
            type: "box",
            xScaleID: "x-axis-0",
            yScaleID: "B",
            xMin: "3",
            xMax: "3",
            yMin: 0,
            yMax: 0.3,            
            borderColor: "red",
            borderWidth: 1,
            onClick: function(e) {
              console.log("Box", e.type, this);
            }            
          }
        ]
      }
  }
});