如何創建Chart.js的擴展？

我創建了一個新的圖表類型：如何創建Chart.js的擴展？

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

     var startPoint = this.datasets[0].points[this.options.startIndex] 
     var endPoint = this.datasets[0].points[this.options.endIndex] 
     var scale = this.scale 

     this.chart.ctx.fillStyle = "#808080"; 
     ctx.globalAlpha = 0.2; 

     this.chart.ctx.fillRect(startPoint.x, 
           scale.startPoint, 
           endPoint.x - startPoint.x, 
           scale.endPoint - scale.startPoint); 
     ctx.stroke(); 
     ctx.globalAlpha = 1; 


     this.chart.ctx.textAlign = 'center'; 
     this.chart.ctx.fillText("EVENT DAY", 
           startPoint.x + (endPoint.x - startPoint.x)/2, 
           scale.startPoint + 20); 
    } 
});

我放置在另一個文件中的代碼，並在頁面引用：

<script src="~/lib/charts-js/Chart.js" type="text/javascript"></script> 
<script src="~/lib/charts-js/ChartExtensions.js" type="text/javascript"></script>

但是當我嘗試使用它，我沒有得到圖表對象在調試器：

new Chart(ctx.children[0].getContext("2d")).LineWithRectangle(data, { pointHitDetectionRadius: 0.05, animation: false, startIndex: start, endIndex: end })

瀏覽器未上報圖圖表對象像它的內置的圖表類型，但表示「不可用」。

我在這裏做錯了什麼？

來源

2016-02-05 Mihai Bratulescu

您的代碼需要主代碼中的ctx與您的擴展名不同。在你的主代碼中，它看起來像一個DOM節點，在你的擴展中，你將它用作上下文。

只需添加

var ctx = this.chart.ctx;

Chart.types.Line.prototype.draw.apply(this, arguments);後，它應該工作。如果沒有，請檢查您的主代碼變量是否都用正確的值定義（start,end和ctx）

來源

2016-02-05 22:10:58 potatopeelings

謝謝，有趣的是，它在小提琴中工作 –

如何創建Chart.js的擴展？

回答

相關問題