在更新ChartJS时消除间隙

Question

我有一个显示服务器CPU使用情况的线条图。它每秒钟更新一次。

​

​

正如您在上面的图像中所看到的，删除数组中的第一个元素时会出现一个很小的空白。我使用下面的方法来更新图表。

function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
  chart.data.labels.shift();
  chart.data.datasets.forEach((dataset) => {
    dataset.data.shift();
  });
  chart.update();
}

var data = JSON.parse(dataAgent.responseText); //JSON received from the server.
addData(CPUChart, '', parseFloat(data.cpu));
removeData(CPUChart);

我怎样才能消除这一差距？

活生生的例子：

​

var CPUChart;
$(document).ready(function() {
  CPUChart = new Chart(cpu, {
    type: 'line',
    data: {
      datasets: [{
        label: "CPU Usage",
        backgroundColor: "rgba(51, 122, 183, 0.2)",
        borderColor: "#337AB7",
        data: [60, 62, 68, 61, 66, 70, 64, 67, 62, 63, 66, 60, 65, 62, 60]
      }],
      labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            max: 100,
            min: 0
          }
        }]
      }
    }
  });

  setInterval(function() {
    var usage = Math.random() * (70 - 50) + 50;
    addData(CPUChart, '', parseInt(usage));
    removeData(CPUChart);
    $(cpuAmount).html(parseInt(usage) + '%');
  }, 1000);
});

function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
  chart.data.labels.shift();
  chart.data.datasets.forEach((dataset) => {
    dataset.data.shift();
  });
  chart.update();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

<div style="height: 100%;width:100%">
  <canvas id="cpu" width="100%"></canvas>
  <span id="cpuAmount" style="font-weight: bold">Loading...</span>
</div>

​

Answer 1

凉爽的!在谷歌了几个小时后，我发现在图表js、回购、github中有一个悬而未决的问题，它与这个problem.Please绝对相关。

我找到了一些解决办法。我没有尝试第二个，而是为第一个添加了一个片段。看一看！

• Fix 1
• Fix 2

修正1:将第一个点的值设置为第二个点，然后删除第二个点。

​

var CPUChart;
$(document).ready(function() {
  Chart.defaults.line.spanGaps = false;
  CPUChart = new Chart(cpu, {
    type: 'line',
    data: {
      datasets: [{
        label: "CPU Usage",
        backgroundColor: "rgba(51, 122, 183, 0.2)",
        borderColor: "#337AB7",
        data: [60, 62, 68, 61, 66, 70, 64, 67, 62, 63, 66, 60, 65, 62, 60, 89]
      }],
      labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '']
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            max: 100,
            min: 0
          }
        }]
      }
    }
  });

  setInterval(function() {
    var usage = Math.random() * (70 - 50) + 50;
    addData(CPUChart, '', parseInt(usage));
    removeData(CPUChart);
    $(cpuAmount).html(parseInt(usage) + '%');
  }, 1000);
});

function addData(chart, label, data) {
  chart.data.labels.push(label);
  chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
  if (chart.data.datasets[0].data.length > 5) {
    chart.data.labels.shift();
    chart.data.datasets.forEach(dataset => {
      dataset.data[0] = dataset.data[1]
      dataset.data.splice(1, 1)
    })
    chart.update();
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js'></script>

<div style="height: 100%;width:100%">
  <canvas id="cpu" width="100%"></canvas>
  <span id="cpuAmount" style="font-weight: bold">Loading...</span>
</div>

​