使用Chart.js 2.0，显示折线图值

我试图让Chart.js 2.0使用animation onComplete函数在折线图中显示点值。我发现一篇文章使用1.02使其工作，但我无法使其在v2中工作

我那把失败的小提琴正在演奏。任何帮助都将不胜感激

var chartData = {


labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "Buttons",
    strokeColor: "#79D1CF",
    tension: 0,
    fill: false,
    data: [60, 80, 81, 56, 55, 40]
  }, {
    label: "Zipppers",
    strokeColor: "rgba(255,255,0,1)",
    tension: 0,
    fill: false,
    data: [50, 75, 42, 33, 80, 21]
  }]
};

var options = {
  animation: {
    onComplete: function() {
      var ctx = this.chart.ctx;
      ctx.font = this.scale.font;
      //alert(ctx.font);
      ctx.fillStyle = this.scale.textColor
      ctx.textAlign = "center";
      ctx.textBaseline = "bottom";
      var datasetName = chartData.data.datasets[0].label;
      alert(chartData.data.datasets[0].label)
      myLine.data.datasets.forEach(function(dataset) {
        ctx.fillStyle = dataset.strokeColor;
        dataset.points.forEach(function(points) {
          ctx.fillText(points.value, points.x, points.y - 10);
        });
      })
    }
  }
};


Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.global.title.display = true;
Chart.defaults.global.title.text = "My Chart";
Chart.defaults.global.title.fontSize = 30;
Chart.defaults.global.legend.position = "bottom";
Chart.defaults.global.hover.mode = "label";
Chart.defaults.global.tooltips.enabled = true;


var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: options
});

---

我只能假设有更好的方法，但现在请尝试以下方法：

var options = {
  animation: {
    onComplete: function() {
    var ctx = this.chart.ctx;
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    this.chart.config.data.datasets.forEach(function(dataset) {
      ctx.fillStyle = dataset.strokeColor;
      dataset.metaDataset._points.forEach(function(p) {
      ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 10);
      });
    })
   }
}};

---

我只能假设有更好的方法，但现在请尝试以下方法：

var options = {
  animation: {
    onComplete: function() {
    var ctx = this.chart.ctx;
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    this.chart.config.data.datasets.forEach(function(dataset) {
      ctx.fillStyle = dataset.strokeColor;
      dataset.metaDataset._points.forEach(function(p) {
      ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 10);
      });
    })
   }
}};

---

对于2.5版，我注意到也没有metaDataset。 我使用了这个（假设“yourdata”包含图表的数据数组）

---

希望这有帮助

对于2.5版，我注意到也没有metaDataset。

onComplete: function(animation) {

                      let ctx: any = this.chart.ctx;
                      let chart: any = this;

                      ctx.fillStyle = 'rgb(133, 157, 189)'; 
                      ctx.textAlign = "center";
                      ctx.textBaseline = "bottom";

                      let datasets = this.config.data.datasets;
                      datasets.forEach(function (dataset, i) {
                          chart.getDatasetMeta(i).data.forEach(function (p, j) {
                            ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 0);
                          });
                       });


                    }

我使用了这个（假设“yourdata”包含图表的数据数组）

希望这有帮助

onComplete: function(animation) {

                      let ctx: any = this.chart.ctx;
                      let chart: any = this;

                      ctx.fillStyle = 'rgb(133, 157, 189)'; 
                      ctx.textAlign = "center";
                      ctx.textBaseline = "bottom";

                      let datasets = this.config.data.datasets;
                      datasets.forEach(function (dataset, i) {
                          chart.getDatasetMeta(i).data.forEach(function (p, j) {
                            ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 0);
                          });
                       });


                    }

我使用的是2.5版

---

我使用的是2.5版

Hey appMoFo谢谢你的回答。它很有魅力，很有趣。。。这在使用v2.5时不起作用。它在

dataset.metaDataset上抛出错误。\u指向

交互，因为dataset对象上没有属性

metaDataset

。（我在控制台中查看）您使用的是什么版本？2.什么？嘿，阿普莫福，谢谢你的回答。它很有魅力，很有趣。。。这在使用v2.5时不起作用。它在

dataset.metaDataset上抛出错误。\u指向

交互，因为dataset对象上没有属性

metaDataset

。（我在控制台中查看）您使用的是什么版本？2.什么？添加一些描述代码的详细信息以便更好地理解。添加一些描述代码的详细信息以便更好地理解。