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

Question

我使用以下配置

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个数据点和它的相当模糊由具有ChartJS的图表。 有没有什么办法可以修改配置让该行是连续的和尖锐？

Answer 1

这是不模糊。它看起来很模糊，因为你有大量的数据和数据点圈重叠。你能解决这个

一种方式是通过像这样设置pointRadius属性0为您的数据集：

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

，将删除这些数据点圆。