如何缩小高度并增加自定义Chartjs水平线的线宽？

Question

我正在尝试自定义使用Chartjs 2插件绘制的线条，但我需要进一步的帮助。我想缩小线条的宽度，并将宽度增加到左边，以便它适合我的设置。

我目前的设置如下：

负责这种外观的代码在这里：

Chart.pluginService.register({
    afterDraw: function(chart) {
        if (typeof chart.config.options.lineAt != 'undefined') {
            var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id];

            if(yAxe.min != 0) return;

            ctxPlugin.strokeStyle = "#14646F";
            ctxPlugin.beginPath();
            lineAt = (lineAt - yAxe.min) * (100 / yAxe.max);
            lineAt = (100 - lineAt) / 100 * (yAxe.height) + yAxe.top;
            ctxPlugin.moveTo(xAxe.left, lineAt);
            ctxPlugin.lineTo(xAxe.right, lineAt);
            ctxPlugin.stroke();

        }
    }
});

有人知道我必须在ctxPlugin中更改或添加内容吗？

修改

我发现下一行会增加该行的宽度。零值已覆盖'xAxe.left'。

ctxPlugin.moveTo(0, lineAt);

Answer 1

我发现使用这个插件我正在处理CanvasRenderingContext2D对象。很高兴意识到这一事实。 http://html5index.org/Canvas%20-%20CanvasRenderingContext2D.html显示此对象可以处理的所有变量/方法的列表。在我的情况下，下一行帮助了我：

ctxPlugin.lineWidth = 1;
ctxPlugin.moveTo(0, lineAt);

希望这也可以帮助您使用Chart.js自定义内容！