Question

我需要渲染一些有很多点（200）并且在开头x等于y的行。

但正如你在codepen看到的那样，这条直线不直。有没有办法平滑渲染？

非常感谢

var ctx = document.getElementById("myChart");

function generateFakeData() {
  var res = [];
  var i = 0;
  for (i = 0; i < 200; ++i) {
    res.push(i);
  }

  return res;
}
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: generateFakeData(),
    datasets: [
      {
        label: "# of Votes",
        data: generateFakeData(),
        radius: 0,
        borderColor: "#156FB4"
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});

Answer 1

如果您要将伪数据功能更改为：

function generateFakeData() {
  var res = [];
  res[0] = 0;
  res[200] = 200;
  return res;
}

并将spanGaps: true添加到选项中，线条将是美观和直线的，否则像素排列的方式会使它在尝试连接每个像素时看起来呈锯齿状。

不确定这是否有助于您的使用案例。

ChartJS折线图x = y不渲染直线

1 个答案: