如何创建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的扩展？

回答

相关问题