0

我有一个 2 线图，一个没有任何点（0 大小）绘制，另一个只有 2 个点（没有线）。我想让这些点越过这条线，而不是相反（这条线实际上越过了我想要的点）。您可以在此图像上看到结果：在此处输入图像描述

这是我的代码：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                label: '',
                data: dataset,
                borderColor: 'rgb(0, 0, 255, 1)',
                borderWidth: 2,
                pointRadius: 0,
                pointHoverRadius: 0,
                fill: "origin",
            },
            {
                label: 'Events',
                data: [{x: "2020-10-22", y: 4850}, {x: "2020-10-27", y: 4730}],
                fill: false,
                pointRadius: 15,
                pointHoverRadius: 15,
                pointBorderWidth: 0,
                pointHoverBorderWidth: 0,
                pointBackgroundColor: 'rgba(255, 0, 0)',
                pointStyle: 'triangle',
                pointHoverBackgroundColor: 'green',
                showLine: false,
            },
        ],
    },
    options: {
        responsive: false,
        scales: {
            y: {
                beginAtZero: false,
            }
        },
    },
});

非常感谢

4

1 回答 1

0

您可以切换数据集，以便您的具有 2 个点的数据集在数组中排在第一位。

或者，您可以order在两个数据集中添加带有数字的属性，该数字越大，数据集绘制得越快。因此，您需要为数据集分配 2 个点的顺序为 0，另一个点的顺序为 1。

有关这方面的更多信息，您可以阅读这部分文档

于 2022-01-29T00:40:23.173 回答