Chart.js 2.0 - 垂直线

谁能告诉我如何扩展Chart.js v2.0。我在折线图中需要垂直线，我想实现类似于http://jsfiddle.net/dbyze2ga/的东西。Chart.js 2.0 - 垂直线

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 
});

来源

2016-03-31 wannensn

如果您运行给定的鳕鱼，您得到的错误是什么è？ – Gunaseelan

问题在于，使用Chart.js 2.0时，类层次结构发生了变化，他们现在使用每个数据集的控制器。你可以在[link]找到新的文档（http://nnnick.github.io/Chart.js/docs-v2/#advanced-usage-extending-existing-chart-types）。我还用2.0库创建了一个新的小提琴[链接]（http://jsfiddle.net/1v6pjy3u/1/）。 – wannensn

UPDATE：见https://stackoverflow.com/a/45092928/360067使用图表注解插件更简单，更可靠的解决方案。

您可以扩展line类型以增加对画线

预览

脚本

支持

var originalLineDraw = Chart.controllers.line.prototype.draw; 
Chart.helpers.extend(Chart.controllers.line.prototype, { 
    draw: function() { 
    originalLineDraw.apply(this, arguments); 

    var chart = this.chart; 
    var ctx = chart.chart.ctx; 

    var index = chart.config.data.lineAtIndex; 
    if (index) { 
     var xaxis = chart.scales['x-axis-0']; 
     var yaxis = chart.scales['y-axis-0']; 

     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top); 
     ctx.strokeStyle = '#ff0000'; 
     ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); 
     ctx.stroke(); 
     ctx.restore(); 
    } 
    } 
});

然后

var config = { 
    type: 'line', 
    data: { 
    labels: ... 
    datasets: [ 
     ... 
    ], 
    lineAtIndex: 2 
    } 
};

小提琴 - http://jsfiddle.net/mn8x6fso/

来源

2016-04-05 15:40:48 potatopeelings

这很好，谢谢！ – joakimk

谢谢！拯救了我的一天！ – Xander

对我来说，这没有任何作用。 –

对于那些寻找水平线，这里就是我有这么远：

ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(xaxis.left, limits[i].value); 
    ctx.strokeStyle = limits[i].color; 
    ctx.lineTo(xaxis.right, limits[i].value); 
    ctx.stroke(); 
    ctx.restore();

jsFiddle

来源

2016-08-29 12:53:55 AHahn

对于2.0版，最好的办法是用图表注解插件（https://github.com/chartjs/chartjs-plugin-annotation）

小提琴 - https://codepen.io/anon/pen/ZywgKr

脚本

var ctx = document.getElementById("canvas").getContext("2d"); 
new Chart(ctx, { 
    type: "line", 
    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] 
     } 
     ] 
    }, 
    options: { 
     annotation: { 
     annotations: [ 
      { 
      type: "line", 
      mode: "vertical", 
      scaleID: "x-axis-0", 
      value: "MAR", 
      borderColor: "red", 
      label: { 
       content: "TODAY", 
       enabled: true, 
       position: "top" 
      } 
      } 
     ] 
     } 
    } 
    } 
);

十字从https://github.com/chartjs/Chart.js/issues/4495#issuecomment-315238365

发布

来源

2017-07-14 00:44:14 potatopeelings

Chart.js 2.0 - 垂直线

回答

相关问题