Question

我试图让Chart.js 2.0使用动画onComplete函数在折线图中显示点值。我找到了一个使用1.02 how to display data values on Chart.js使其工作的帖子，但我无法在v2中使其工作。

我失败的小提琴是Line Chart 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
});

Answer 1

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

Answer 2

我只能假设有更好的方法，但现在试试这个：

BitmapDrawable

Answer 3

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

    dataset._meta['1'].dataset._children.forEach((point, index) => {
            ctx.fillText(yourdata[index], point._view.x, point._view.y - 15);
          });

希望这有帮助！

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

3 个答案: