javascript - 在 ChartJS 散点图中移动零线

Question

我在 ChartJS 图表中有一个带有单点的散点图。但是，刻度从零开始，这导致零线不会显示在图表的中间。我将添加几张图片来说明我在寻找什么。

想要的结果：

当前结果：

（请忽略两个图像数据集之间的差异）

这是我当前的代码：

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myScatter = Chart.Scatter(ctx, {
                data: {
                    datasets: [{
                        backgroundColor: '#000000',
                        borderColor: '#000000',
                        data: [{
                            x: 61.01,
                            y: 62.87
                        }]
                    }]
                },
                options: {
                    title: {
                        display: false,
                    },
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero: false,
                                max: 100,
                                min: 0,
                                stepSize: 20
                            },
                            gridLines: {
                                display: true,
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: false,
                                max: 100,
                                min: 0,
                                stepSize: 20
                            }
                        }]
                    }
                },

            });

           };

我查看了文档，但找不到允许我将 zeroLines 移动到 50 的样式设置。我有可能实现这一点吗？

标签： javascriptchart.js

Answer 1

正如 Z. Bagley 在评论中向我建议的那样，我只需在图表上画两条线就解决了这个问题。使用Annotations Plugin很容易实现这一点。

添加插件后，我只是将以下代码添加到我的选项对象中：

annotation: {
    annotations: [
        {
            drawTime: 'afterDraw',
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-1',
            value: 50,
            borderColor: '#005a99',
            borderWidth: 4,
            label: {
                enabled: false,
            }
        },
        {
            drawTime: 'afterDraw',
            type: 'line',
            mode: 'vertical',
            scaleID: 'x-axis-1',
            value: 50,
            borderColor: '#005a99',
            borderWidth: 4,
            label: {
                enabled: false,
            }
        }
    ]
},

这创造了想要的结果：