Question

我创建了一个新的图表类型：

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

Chrome不会像内置图表类型那样报告ChartType对象，但会说“不可用”。

我在这里做错了什么？

Answer 1

您的代码需要主代码与您的扩展程序中ctx的值不同。在您的主代码中，它看起来像一个DOM节点，在您的扩展中，您将它用作上下文。

添加

  var ctx = this.chart.ctx;

在Chart.types.Line.prototype.draw.apply(this, arguments);之后

它应该有效。如果没有，请检查您的主要代码变量是否都使用正确的值定义（start，end和ctx）

如何创建Chart.js的扩展？

1 个答案: