使用 Chart.js 注释插件的垂直线在 x 轴上具有线性刻度

Question

当 x 轴使用线性刻度时，我在使用 Chart.js 的注释插件生成垂直线时遇到了真正的麻烦。这是代码：

const testConfig = {
    type: 'line',
    data: {
        datasets: [{
            label: 'Test dataset',
            data: [{x: .25, y: 65}, {x: .55, y: 59}, {x: .65, y: 80}, {x: .95, y: 81}, {x: 1, y: 56},
                {x: 1.5, y: 55}, {x: 2, y: 40}],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        scales: {
            xAxis: {
                type: 'linear'
            }
        },
        plugins: {
            annotation: {
                annotations: {
                    line1: {
                        type: 'line',
                        scaleId: 'x',
                        value: .55,
                        borderColor: 'rgba(255, 99, 132, 0.25)'
                    }
                }
            }
        }
    }
};
const testChart = new Chart(document.getElementById('testChart').getContext('2d'), testConfig);

结果如下：

但是我尝试指定垂直线（使用 scaleID 和 value 或使用 xScaleID、xMin 和 xMax）注释总是出现作为对角线， .指定一条水平线就可以了。使用框注释有类似的结果：我在整个图表上得到一个水平框（换句话说，yMin 和 yMax 工作得很好，但是 xMin 和 xMax 不't.

我正在使用注释插件 v 1.4.0。

我做错了什么？

Answer 1

这是因为它无法匹配比例尺。你给你的 x 轴一个 xAxis 的比例 ID，同时你告诉注释插件它必须查看 ID 为 x 的比例。这两个必须相同

使用 Chart.js 注释插件的垂直线在 x 轴上具有线性刻度

Vertical line using Chart.js annotations plugin with linear scale on x axis

annotations

chart.js