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

我正在使用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'
        }
      }
    }
  }
};

---

每次有新的值可用时，只要达到某个限制，就可以删除过时的

标签

和

数据集。数据

值。这可以通过使用从

数组中删除第一个元素来完成。更新这些数组后，需要调用
chart.update（）

要显示最后添加的数据点上的值，可以使用。它提供了可用于执行自定义代码的不同挂钩。在下面的可运行代码片段中，我使用
afterDraw
钩子直接在
画布上绘制文本


var图表=新图表（“图表”{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
var iLastValue=chart.data.labels.length-1；
var lastValue=chart.data.datasets[0].data[iLastValue]；
var x=xAxis.getPixelForValue（chart.data.labels[iLastValue]）；
变量y=yAxis.getPixelForValue（lastValue）；
ctx.save（）；
ctx.textAlign='中心'；
ctx.font='14px Arial'；
ctx.fillStyle=“红色”；
ctx.fillText（'Value:'+lastValue，x，y-15）；
ctx.restore（）；
}
}],
回答：是的，
MaintaintAspectRatio:false，
数据：{
标签：[]，
数据集：[{
标签：“数据”，
数据：[]，
填充：假，
线张力：0，
背景颜色：“白色”，
边框颜色：“红色”，
}]
},
选项：{
布局：{
填充：{
右：50
}
},
比例：{
xAxes：[{
键入：“时间”，
滴答声：{
资料来源：“自动”
},
时间：{
单位:"第二",，
显示格式：{
第二个：“mm:ss”
},
工具提示格式：“mm:ss”
},
}],
雅克斯：[{
滴答声：{
分:0,，
最高：20，
步长：5
}
}]
}
}
});
var最大值=4；
设置间隔（（）=>{
chart.data.labels.push（newdate（））；
chart.data.datasets[0].data.push（Math.floor（（Math.random（）*20）+1））；
if（chart.data.labels.length>maxValues）{
chart.data.labels.shift（）；
chart.data.dataset[0].data.shift（）；
}
chart.update（）；
}, 1000);
每次有新值可用时，只要达到某个限制，就可以删除过时的
标签
和
数据集。数据
值。这可以通过使用从
数组中删除第一个元素来完成。更新这些数组后，需要调用
chart.update（）

要显示最后添加的数据点上的值，可以使用。它提供了可用于执行自定义代码的不同挂钩。在下面的可运行代码片段中，我使用
afterDraw
钩子直接在
画布上绘制文本


var图表=新图表（“图表”{
键入：“行”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度['y轴-0']；
var iLastValue=chart.data.labels.length-1；
var lastValue=chart.data.datasets[0].data[iLastValue]；
var x=xAxis.getPixelForValue（chart.data.labels[iLastValue]）；
变量y=yAxis.getPixelForValue（lastValue）；
ctx.save（）；
ctx.textAlign='中心'；
ctx.font='14px Arial'；
ctx.fillStyle=“红色”；
ctx.fillText（'Value:'+lastValue，x，y-15）；
ctx.restore（）；
}
}],
回答：是的，
MaintaintAspectRatio:false，
数据：{
标签：[]，
数据集：[{
标签：“数据”，
数据：[]，
填充：假，
线张力：0，
背景颜色：“白色”，
边框颜色：“红色”，
}]
},
选项：{
布局：{
填充：{
右：50
}
},
比例：{
xAxes：[{
键入：“时间”，
滴答声：{
资料来源：“自动”
},
时间：{
单位:"第二",，
显示格式：{
第二个：“mm:ss”
},
工具提示格式：“mm:ss”
},
}],
雅克斯：[{
滴答声：{
分:0,，
最高：20，
步长：5
}
}]
}
}
});
var最大值=4；
设置间隔（（）=>{
chart.data.labels.push（newdate（））；
chart.data.datasets[0].data.push（Math.floor（（Math.random（）*20）+1））；
if（chart.data.labels.length>maxValues）{
chart.data.labels.shift（）；
chart.data.dataset[0].data.shift（）；
}
chart.update（）；
}, 1000);

是的，我可以这样做，但我想在图表中展示的是一整天的数据行为，第二天到来时会重置。这就是为什么我希望图表中的最后一点始终显示其值，而无需将鼠标悬停在该点上，因为当一天即将结束时，图表可能会变得相当大。@Ruben Jose Diaz:我根据您的评论更新了我的答案。我希望这反映了您所寻找的。是的，我可以这样做，但我试图在图表中显示的是一整天中的数据行为，第二天到来时会重置。这就是为什么我希望图表中的最后一点始终显示其值，而无需将鼠标悬停在该点上，因为当一天即将结束时，图表可能会变得相当大。@Ruben Jose Diaz:我根据您的评论更新了我的答案。我希望这反映了你在寻找什么。
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);