How to display final point value in 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 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'
        }
      }
    }
  }
};

回答1:

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);

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>

来源：https://stackoverflow.com/questions/61929594/how-to-display-final-point-value-in-charts-js

标签

javascript

chart.js