数据点添加或删除流程

Question

我首先使用setInterval每隔1秒填充10个数据点，在生成前10个数据点之后，从第11个数据点我想开始删除存在的第1个数据点，同样在添加第12个数据点时我要删除第二个数据点（或最左边的数据点），依旧......

我有2个问题

1）前10个数据点后。没有看到图线（查看下图）

2）屏幕上只有10个数据点的缓慢丢失的一致性，我看到新的点被添加并且旧的点被删除但是在某种程度上慢慢地更多的点在图上，即使条件执行并且我添加一个并且删除一个一次。

数据点添加或删除流程

1st  (add) 
2nd  (add) 
3rd  (add) 
4th  (add) 
5th  (add) 
6th  (add) 
7th  (add) 
8th  (add) 
9th  (add) 
10th (add) 
11th (add) 1st (remove) 
12th (add) 2nd (remove)
13th (add) 3rd (remove) 
14th (add) 4th (remove)
so on... (keeping only 10 point on the screen)

mycode的

html代码

<canvas id="myChart" ></canvas>
<input class="btn btn-block btn-primary" type="button" value="Start button" onclick="abc()">

js代码

var canvas = document.getElementById('myChart');
var data = {
    labels: [],        //graph X-axis labels
    datasets: [
        {
            label: "Sample Data set",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [],     //graph Y-axis data points
        }
    ]
};

var i = 0;
function adddata()
{
      if(i > 10)
      { 
        myLineChart.data.datasets[0].data[i] = (Math.random() * 100);
        myLineChart.data.labels[i] = "label"+i;
        console.log("i: "+i);
        myLineChart.data.labels.splice(0,1);
        myLineChart.data.datasets[0].data.splice(0,1);
        myLineChart.update();

      }
      else{
        myLineChart.data.datasets[0].data[i] = (Math.random() * 100);
        myLineChart.data.labels[i] = "label"+i;
        console.log("i: "+i);
        myLineChart.update();
      }   
      i++;
}

function abc()
{
  setInterval(adddata,1000);
}
var option = {
  showLines: true
};
var myLineChart = Chart.Line(canvas,{
  data:data,
  options:option
});

Answer 1

最初设置数组时，数组具有特定的大小。

例如，具有3个值的数组将如下所示：

array[0] = value1
array[1] = value2
array[2] = value3

您只能将元素指定给数组中已存在的位置。

例如，以下内容有效：

array[2] = value4;

但是，您不能将值分配给数组中尚不存在的位置，并且长度超过数组长度。因此，以下代码将抛出索引超出范围错误：

array[3] = value5;

目前，您正尝试使用以下方法为data数组添加新值：

myLineChart.data.datasets[0].data[i] = (Math.random() * 100);

此代码假定数组的长度至少为i，但它不是，因此会抛出错误。

要将新值附加到数组的末尾，请使用Array.push()。 push()方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。

您的代码应如下所示：

myLineChart.data.datasets[0].data.push(Math.random() * 100);

如何在Chartjs

数据点添加或删除流程

mycode的

1 个答案: