使用chartjs的垂直洗滌器行

Question

有沒有辦法在使用chart.js v2懸停在折線圖上時獲得垂直洗滌器行？類似於垂直線出現使用這種人力車例子方式：http://code.shutterstock.com/rickshaw/examples/formatter.html

我可以對沿線實際點使用的工具提示，但希望能有一條垂直線顯示爲用戶將鼠標懸停圖表和磨砂從左到右

Answer 1

您可以擴展Chart.js來執行此操作。初始化圖表後，只需覆蓋showTooltip方法即可。

---

預覽

---

腳本

Chart.types.Line.extend({ 
    name: "LineAlt", 
    initialize: function() { 
     Chart.types.Line.prototype.initialize.apply(this, arguments); 

     var originalShowTooltip = this.showTooltip; 
     this.showTooltip = function (activePoints) { 

      if (activePoints.length) { 
       var ctx = this.chart.ctx; 
       var scale = this.scale; 
       ctx.save(); 
       ctx.strokeStyle = '#aaa'; 
       ctx.beginPath(); 
       ctx.moveTo(activePoints[0].x, scale.startPoint); 
       ctx.lineTo(activePoints[0].x, scale.endPoint); 
       ctx.stroke(); 
       ctx.restore(); 
      } 

      return originalShowTooltip.apply(this, arguments); 
     } 
    } 
}); 

然後

new Chart(ctx).LineAlt(data); 

---

小提琴 - http://jsfiddle.net/98gz1fhw/