rest api 使用 javascript 更新实时图表

Question

I'm looking for a chart libraly javascript. It can draw line chart and call to rest api every few seconds (5s or 3s) then update the line chart. I searched its calling live chart updating by json but it draw only data in my json api i want it continue drawing. Can you help me. Many many thanks.

Answer 1

If you want to have Charts in your project then you may want to take a look at Chartjs . It's a great library providing all the charts one may need, such as Line, Bar, Pie, and many others.

Creating a chart is easy, eg:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

For additional example you may want to see this introduction to Chart.js .

For dynamically updating your Charts check directly the Updating Charts Docu . An example from the link:

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.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}