ChartJS / ChartJS-plugin注释设置垂直线的高度

Question

是否可以在图表js中设置垂直线的高度？

例如，以下示例： https://jsfiddle.net/caj89x6L/

{
  type: 'line',
  id: 'vline' + index,
  mode: 'vertical',
  scaleID: 'x-axis-0',
  value: date,
  **endValue: 3.5, ?? 
  height: 3.5,** ?? 
  borderColor: 'green',
  borderWidth: 1,
  label: {
     enabled: true,
     position: "center",
     content: amount[index]
  }

}

我可以在某处设置高度属性吗？ endValue Dows不起作用

Answer 1

嘿，我不知道这是否对您有帮助，但是我写了一个plugin for ChartJS，它完全符合您的要求。您可以根据自己的需要调整repo中的源代码。这是一个相关的代码段：

  /**
   * Draw the line height annotation to the highest data point on the chart.
   * @param {int} x horizontal coordinate on canvas
   * @param {int} bottomY bottom Y dimension of the chart
   * @param {float} highestDataY highest possible Y value on the chart, taking padding and border offsets into consideration.
   */
  drawLineHeightAnnotation(x, bottomY, highestDataY) {
    let ctx = this.ctx;
    let options = this.options;

    ctx.save();
    ctx.beginPath();
    if (!options.noDash) {
      ctx.setLineDash([10, 10]);
    }
    ctx.moveTo(x, highestDataY);
    ctx.lineTo(x, bottomY);
    ctx.lineWidth = options.lineWeight ? options.lineWeight : 1.5;
    ctx.strokeStyle = options.color ? options.color : "#000";
    ctx.stroke();
    ctx.restore();
  }