如何在charts.js中显示最终点值？

Question

我正在使用Charts.js库从数据中显示一个不断更新的线图。有没有一种方法可以一直只显示最后的点值？我希望它能做到随时监控添加的数值。

javascript代码。

var config2 = {
  type: 'line',
  data: {
  labels: 0,
  datasets: [{ 
    label: "No selection",
    lineTension: 0,
    borderColor: "rgba(222, 44, 31)",
    pointBackgroundColor: "#fff675",
    fill: false,

    data: 0,
      }
    ]
  },
  options: {
    responsive: true,
    title: {
      display: false,
      text: 'Chart.js Time Point Data'
    },
    scales: {
      x: {
        type: 'time',
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Date'
        },
        ticks: {
          major: {
            enabled: true
          },
          fontStyle: function(context) {
            return context.tick && context.tick.major ? 'bold' : undefined;
          },
          fontColor: function(context) {
            return context.tick && context.tick.major ? '#FF0000' : undefined;
          }
        }
      },
      y: {
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }
    }
  }
};

Answer 1

每当有新的值时，你可以简单地删除过时的 labels 和 dataset.data 一旦达到一定的极限，就会出现数值。这可以通过使用 Array.shift()，它将第一个元素从一个 array. 一旦这些数组被更新，你需要调用 chart.update().

var maxValues = 4;
setInterval(() => {
  chart.data.labels.push(new Date());
  chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
  if (chart.data.labels.length > maxValues) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
}, 1000);

为了显示最后添加的数据点的值，你可以使用 插件核心API. 它提供了不同的钩子，可用于执行自定义代码。在下面的可运行代码片段中，我使用了 afterDraw 钩子，直接将文字画在 canvas.

var chart = new Chart('chart', {
  type: "line",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      var iLastValue = chart.data.labels.length - 1;
      var lastValue = chart.data.datasets[0].data[iLastValue];
      var x = xAxis.getPixelForValue(chart.data.labels[iLastValue]);
      var y = yAxis.getPixelForValue(lastValue);
      ctx.save();
      ctx.textAlign = 'center';
      ctx.font = '14px Arial';
      ctx.fillStyle = "red";
      ctx.fillText('Value: ' + lastValue, x, y - 15);
      ctx.restore();
    }
  }],
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: [],
    datasets: [{
      label: "Data",
      data: [],
      fill: false,
      lineTension: 0,
      backgroundColor: "white",
      borderColor: "red",
    }]
  },
  options: {
    layout: {
      padding: {
        right: 50
      }
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: 'auto'
        },
        time: {
          unit: 'second',
          displayFormats: {
            second: 'mm:ss'
          },
          tooltipFormat: 'mm:ss'
        },
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 20,
          stepSize: 5
        }
      }]
    }
  }
});

var maxValues = 4;
setInterval(() => {
  chart.data.labels.push(new Date());
  chart.data.datasets[0].data.push(Math.floor((Math.random() * 20) + 1));
  if (chart.data.labels.length > maxValues) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>