代码之家 › 专栏 › 技术社区 › Roshana Pitigala Laxmansinghsodhanohdiyala

更新ChartJS时删除间隙

chart.js javascript

Roshana Pitigala Laxmansinghsodhanohdiyala · 技术社区 · 6 年前

我有一个折线图来显示我的服务器的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>

1 回复 | 直到 6 年前

Roshana Pitigala Laxmansinghsodhanohdiyala 6 年前

酷!在谷歌搜索了几个小时后,我发现chart js repo中存在一个未解决的问题 github 绝对与这个问题有关。请看一下。

我找到了一些修复方法。我没有尝试第二个,但为第一个添加了一个片段。看一看!

Fix 1
Fix 2

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>