Question

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

通缉结果：

当前结果：

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

这是我目前的代码：

        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
                            }
                        }]
                    }
                },

            });

           };

我查看了documentation，但找不到允许我将零线移动到50的样式设置。我可以实现这个吗？

Answer 1

正如Z. Bagley在评论中向我建议的那样，我只是在图表上绘制了2条线就解决了这个问题。使用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,
            }
        }
    ]
},

创造了想要的结果：

在ChartJS散点图中移动zerolines

1 个答案: