如何在ChartJS中修复图表看起来模糊？

Question

我使用以下配置使用ChartJS制作了一个图表

var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Voltage Fluctuation',
                data: data,
                borderWidth: 1,

                fill: false,
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'minute',
                        displayFormats: {
                            hour: 'HH:mm:ss'
                        }
                    }
                }]
            },
        }
    });

图表输入了800个数据点，而且非常模糊。 有什么办法可以改变配置，使线条连续且清晰吗？

Answer 1

不模糊。它看起来很模糊，因为您有大量数据并且数据点圈重叠。

解决此问题的一种方法是将 pointRadius 属性设置为数据集的 0 ，如下所示：

...
datasets: [{
   label: 'Voltage Fluctuation',
   data: data,
   borderWidth: 1,
   fill: false,
   pointRadius: 0  //<- set this
}]
...

这将删除那些数据点圈。