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

【问题标题】：How to fix chart looking blurry in ChartJS?如何修复 ChartJS 中看起来模糊的图表？
【发布时间】：2018-02-11 21:15:07
【问题描述】：

我用 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 个数据点，非常模糊。有什么办法可以改变配置，使线条连续且清晰？

【问题讨论】：

标签： javascript chart.js momentjs data-visualization

【解决方案1】：

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

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

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

这将删除那些数据点圆圈。

【讨论】：

谢谢。我现在将它设置为 0.3，它看起来比之前的迭代要好得多，但颜色有点浅。有什么东西可以让它变成纯黑线？
将 pointBorderColor/pointBackgroundColor 设置为 black 用于数据集。