Javascript Char.js线性插值

我正在尝试使用Chart.js绘制函数 我的抽签有问题让我们看看：

这是“x”函数，直线不直
我不知道这是分辨率问题还是插值问题
这是我的图表：

var scatterChart = new Chart(ctx, {
      type: 'line',
      data: {
          datasets: [{
              borderWidth:2,
              pointRadius :0,
              borderColor: 'rgba(0, 0, 255, 1)',
              label: 'Scatter Dataset',
              data: JSON.parse(data),
              fill: false,
              lineTension: 0,
              cubicInterpolationMode: 'linear'

          }]
      },
      options: {
          scales: {
              xAxes: [{
                  type: 'linear',
                  position: 'bottom'
              }]
          },
          pan: {
              enabled: true,
              mode: 'xy'
          },
          zoom: {
              enabled: true,
              mode: 'xy',
          },
          responsive: true,
          maintainAspectRatio: true,
      }
  });

---

问题是

chart.js

如何在数据点之间绘制小线段。下面是一个动画，用于在较亮的线的顶部设置完整不透明度线的动画。第二行是在

步骤=1

处增长的，而较轻的一行是漂亮而笔直的

[{x:-100，y:-100}，{x:100，y:100}]

。如果更改为

step=10

，您将看到直线填充

在下面的代码中（或在小提琴中），您可以随意更改

边框宽度

、

边框颜色

和

不透明度

。我尝试添加

borderCapStyle:'round'

和

borderJoinStyle:'round'

，但这两个选项似乎都没有多大效果

var ctx = document.getElementById("test").getContext("2d");
var i = -100;
var data = [{x: i, y: i}];
var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      borderWidth: 2,
      pointRadius: 0,
      borderColor: 'rgba(0, 0, 255, 1)',
      label: 'Scatter Dataset 1',
      data: data,
      fill: false,
      lineTension: 0,
      cubicInterpolationMode: 'linear'
    }, {
      borderWidth: 2,
      pointRadius: 0,
      borderColor: 'rgba(0, 0, 255, 0.4)',
      label: 'Scatter Dataset 2',
      data: [{x:-100,y:-100},{x:100,y:100}],
      fill: false,
      lineTension: 0,
      cubicInterpolationMode: 'linear'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom'
      }]
    },
    pan: {
      enabled: true,
      mode: 'xy'
    },
    zoom: {
      enabled: true,
      mode: 'xy',
    },
    responsive: true,
    maintainAspectRatio: true,
  }
});
var step = 1;
var intervalId = setInterval(function() {
  i += step;
  if (i <= 100) {
    scatterChart.data.datasets[0].data.push({x:i,y:i});
    scatterChart.update();
  } else {
    clearInterval(intervalId);
  }
}, 200);

var ctx=document.getElementById（“test”）.getContext（“2d”）；
var i=-100；
变量数据=[{x:i，y:i}]；
var散点图=新图表（ctx{
键入：“行”，
数据：{
数据集：[{
边界宽度：2，
点半径：0，
边框颜色：“rgba（0,0,255,1）”，
标签：“散布数据集1”，
数据：数据，
填充：假，
线张力：0，
CubicinInterpolationMode:“线性”
}, {
边界宽度：2，
点半径：0，
边框颜色：“rgba（0,0,255,0.4）”，
标签：“散布数据集2”，
数据：[{x:-100，y:-100}，{x:100，y:100}]，
填充：假，
线张力：0，
CubicinInterpolationMode:“线性”
}]
},
选项：{
比例：{
xAxes：[{
类型：'线性'，
位置：'底部'
}]
},
潘：{
启用：对，
模式：“xy”
},
缩放：{
启用：对，
模式：“xy”，
},
回答：是的，
维护Aspectratio：是的，
}
});
var阶跃=1；
var intervalId=setInterval（函数（）{
i+=阶跃；
如果（i In
data:{datasets:[{data:JSON.parse（data）…
data

传递给

JSON.parse

的变量的值是多少？它只是一个字符串作为JS对象，如下所示：[{x:1，y:1}，{x:2，y:2}，{x:3，y:3}，{x:4，y:5}，{x:100，y:100}]这里我的步骤是1如果点是线性的，那么它必须是

chart.js

呈现的方式。首先，在

var scatterChart

的正上方添加一行

console.log（data）；

并将该输出添加到您的问题中，以便我们可以看到正在解析的真正的

json

。接下来，尝试硬编码

数据：[{x:1，y:1}，我的数据变量是：“[{x:-100，y:-100}，{x:-99，y:-99}，{x:-98，y:-98}，…，{x:0，y:0}，…，{x:100，y:100}]”是的，[{x:-100，y:-100}，{x:100，y:100}]显示得很好。但我的问题是我正在开发渲染函数应用程序。所以我不能对窦房结或余弦函数这样做。
<canvas id="test" width="400" height="300"></canvas>