讓獨斷專行虛線

Question

我已經遵循了這一問題，實現任意行：
Chart.js — drawing an arbitrary vertical line

Fiddle

我用這行代碼改爲虛線：

this.chart.ctx.setLineDash([3]); 

但是這也改變了圖表上的線條，我只想改變任意的線條筆劃。我該如何調整呢？

謝謝。

Answer 1

只是包裝你設置ctx性質，並與下面的行畫上保存和恢復上下文塊，

this.chart.ctx.save(); 
... 
this.chart.ctx.restore(); 

---

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

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.save(); 
 
    this.chart.ctx.setLineDash([3]); 
 
    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(); 
 
    this.chart.ctx.restore(); 
 

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

<script src='https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js'></script> 
 
<canvas id="LineWithLine" width="600" height="400"></canvas>