Chart.js — 绘制任意垂直线

Posted 2023-02-16

技术标签:

【中文标题】Chart.js — 绘制任意垂直线【英文标题】：Chart.js — drawing an arbitrary vertical line 【发布时间】：2015-07-27 05:05:52 【问题描述】：

如何使用 Chart.js 在 x 轴上的特定点绘制垂直线？

特别是，我想在 LineChart 上画一条线来表示当前日期。这是图表的模型： http://i.stack.imgur.com/VQDWR.png

【问题讨论】：

【参考方案1】：

更新 - 此答案适用于 Chart.js 1.x，如果您正在寻找 2.x 答案，请检查 cmets 和其他答案。

您扩展折线图并在绘图函数中包含用于绘制线条的逻辑。

预览

HTML

<div>
    <canvas id="LineWithLine"  ></canvas>
</div>

脚本

var data = 
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    ]
;

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend(
    name: "LineWithLine",
    draw: function () 
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    
);

new Chart(ctx).LineWithLine(data, 
    datasetFill : false,
    lineAtIndex: 2
);

选项属性 lineAtIndex 控制在哪个点画线。

小提琴 - http://jsfiddle.net/dbyze2ga/14/

【讨论】：

谢谢@potatopeelings，这正是我想要的。我没有足够的代表来支持你，但如果可以的话，我显然会。谢谢！整洁简单:) @Sheetal - 不太明白。您可能想发布您正在寻找的图像。干杯!此外，新版 Chart.js (v2.1.x) 现已发布。以上答案适用于 v1.x 这是一个不错的解决方案。您可以为图表 js 版本 2.1.6 更新此内容吗？ @ArunSS Solution for Chart.js 2.0【参考方案2】：

分享我的 chartjs.org 2.5 版解决方案。我想使用一个插件，使实现可重用。

const verticalLinePlugin = 
  getLinePosition: function (chart, pointIndex) 
      const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
      const data = meta.data;
      return data[pointIndex]._model.x;
  ,
  renderVerticalLine: function (chartInstance, pointIndex) 
      const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
      const scale = chartInstance.scales['y-axis-0'];
      const context = chartInstance.chart.ctx;

      // render vertical line
      context.beginPath();
      context.strokeStyle = '#ff0000';
      context.moveTo(lineLeftOffset, scale.top);
      context.lineTo(lineLeftOffset, scale.bottom);
      context.stroke();

      // write label
      context.fillStyle = "#ff0000";
      context.textAlign = 'center';
      context.fillText('MY TEXT', lineLeftOffset, (scale.bottom - scale.top) / 2 + scale.top);
  ,

  afterDatasetsDraw: function (chart, easing) 
      if (chart.config.lineAtIndex) 
          chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
      
  
  ;

  Chart.plugins.register(verticalLinePlugin);

那么使用就很简单了：

 new Chart(ctx, 
     type: 'line',
     data: data,
     label: 'Progress',
     options: options,
     lineAtIndex: [2,4,8],
 )

上面的代码在位置 2,4 和 8 插入红色垂直线，穿过这些位置的第一个数据集的点。

【讨论】：

这太棒了，而且可重复使用！很好的解决方案！ +1 恢复这个旧帖子，但是可以为每个垂直行配置不同的文本吗？当然，您只需稍微调整一下即可。您应该提供一个带有 index=>text 的地图，而不是 lineAtIndex 数组，在 afterDatasetsDraw 方法中对其进行迭代，并在当前呈现“MY TEXT”的 renderVerticalLine 方法中使用地图中的文本。 Chart.js 现在可能有一些错误导致 ReferenceError "Chart is not defined" 虽然我赞成这个解决方案，但它确实有一个非常难看的限制，因为无法在位于索引之间的值处添加行。但事实证明这是一个很棒的教程。【参考方案3】：

我不得不费力地弄清楚如何用 ChartJS 2.0 做类似的事情，所以我想我会分享。

这是基于覆盖图表原型的新方法，如下所述：https://github.com/chartjs/Chart.js/issues/2321

var ctx = document.getElementById('income-chart');

var originalDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function (ease) 
    originalDraw.call(this, ease);

    var point = dataValues[vm.incomeCentile];
    var scale = this.chart.scales['x-axis-0'];

    // calculate the portion of the axis and multiply by total axis width
    var left = (point.x / scale.end * (scale.right - scale.left));
                
    // draw line
    this.chart.chart.ctx.beginPath();
    this.chart.chart.ctx.strokeStyle = '#ff0000';
    this.chart.chart.ctx.moveTo(scale.left + left, 0);
    this.chart.chart.ctx.lineTo(scale.left + left, 1000000);
    this.chart.chart.ctx.stroke();

    // write label
    this.chart.chart.ctx.textAlign = 'center';
    this.chart.chart.ctx.fillText('YOU', scale.left + left, 200);
;

【讨论】：

【参考方案4】：

我强烈建议使用Chartjs-Plugin-Annotation。

一个例子可以在CodePen找到

var chartData = 
  labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
  datasets: [
    
      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    
  ]
;

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: "MAR",
            borderColor: "red",
            label: 
              content: "TODAY",
              enabled: true,
              position: "top"
            
          
        ]
      
    
  );
;

查看这里了解更多详情：https://***.com/a/36431041

【讨论】：

它对我有用 - 如果没有任何进一步的信息，我将无法为您提供帮助我正在尝试将它添加到 Ionic 项目移动中。您是为网络创建的吗？是的，我为一个网站创建了它。也许您应该创建一个单独的问题，其中包含有关您的实际问题的更多信息并提供一些源代码。已解决，谢谢！ ***.com/questions/47655173/… 所有 chart.js 插件都很乱。这可以解释为什么它们是«插件»而不包含在核心中。这需要经过大量测试。 Chart.js 可以，但不要使用插件，伙计们，自己做吧。【参考方案5】：

这是一支无需使用 chartjs-plugin-annotation 或破解 Chart.js 呈现方式或任何其他插件即可实现类似效果的笔：https://codepen.io/gkemmey/pen/qBWZbYM