线性插值

Char.js Interpolation linear

本文关键字：插值 线性      更新时间：2023-09-26

我试图用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,
      }
  });

Thx人

问题是chart.js如何在数据点之间绘制小线段。这里是一个小提琴，动画一个完全不透明的线在一个较亮的线。第二条线在step=1生长，而较轻的线是很好的和直的[{x:-100,y:-100},{x:100,y:100}]。如果您更改为step=10，您将看到直线填充。

在下面的代码中(或在小提琴中)，您可以尝试更改borderWidth、borderColor和opacity。我试着添加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);

和

<canvas id="test" width="400" height="300"></canvas>
相关文章：