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 - 垂直線

回答

相關問題