如何在Charts.js中显示最终点值 [英] How to display final point value in charts.js

问题描述

我正在使用Charts.js库显示来自不断更新的数据的折线图.有没有办法一直只显示终点值?我希望它能够始终监视添加的值.

I'm using Charts.js library to display a line graph from data which is constantly updated. Is there a way to display only the final point value at all times? I want it to do this to monitor the added values at all times.

javascript代码:

javascript code:

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'
        }
      }
    }
  }
};

推荐答案

每次都有一个新值可用，您只需删除过时的 labels 和 dataset.data 一旦达到一定的极限值.可以使用 Array来完成.shift() ，从 array 中删除第一个元素.这些数组更新后，您需要调用 chart.update().

Each time, a new value is available, you can simply remove outdated labels and dataset.data values once a certain limit is reached. This can be done using Array.shift(), which removes the first element from an array. Once these array are updated, you need to invoke 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 上绘制文本.

For displaying the value on the last added data point, you can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below runnable code snippet, I use the afterDraw hook to draw text directly on the 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>

这篇关于如何在Charts.js中显示最终点值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！