如何在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
}]
...

这将删除那些数据点圈.