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 repo github中存在一个与此问题绝对相关的未解决问题。请查看一下。

我找到了一些修复程序。我没有尝试第二个，但是为第一个添加了一个片段。看看吧！

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>

更新ChartJS时消除差距

1 个答案: