javascript - 高于点的值 - chart.js

Question

我正在使用这个版本的 ChartJS -> http://www.chartjs.org/samples/latest/charts/line/basic.html我想问你 - 是否有可能在点之上增加值(value)？我在想类似的事情:

^ 一个例子:-)

试图使用谷歌查找内容但未成功

提前致谢

Answer 1

是的，有可能:-)

但是，截至目前，ChartJS 中还没有针对此的内置功能。您宁愿必须创建一个图表插件。

ᴘʟᴜɢɪɴ

plugins: [{
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, index) {
         var datasetMeta = chart.getDatasetMeta(index);
         if (datasetMeta.hidden) return;
         datasetMeta.data.forEach(function(point, index) {
            var value = dataset.data[index],
                x = point.getCenterPoint().x,
                y = point.getCenterPoint().y,
                radius = point._model.radius,
                fontSize = 14,
                fontFamily = 'Verdana',
                fontColor = 'black',
                fontStyle = 'normal';
            ctx.save();
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
            ctx.fillStyle = fontColor;
            ctx.fillText(value, x, y - radius - fontSize);
            ctx.restore();
         });
      });
   }
}]

^{* 添加它，然后添加您的图表选项。}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE 1',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.5)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }, {
         label: 'LINE 2',
         data: [2, 4, 1, 5, 3],
         backgroundColor: 'rgba(233, 30, 99, 0.5)',
         borderColor: 'rgba(233, 30, 99, 0.6)',
         fill: false
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               max: 7
            }
         }]
      }
   },
   plugins: [{
      afterDatasetsDraw: function(chart) {
         var ctx = chart.ctx;
         chart.data.datasets.forEach(function(dataset, index) {
            var datasetMeta = chart.getDatasetMeta(index);
            if (datasetMeta.hidden) return;
            datasetMeta.data.forEach(function(point, index) {
               var value = dataset.data[index],
                   x = point.getCenterPoint().x,
                   y = point.getCenterPoint().y,
                   radius = point._model.radius,
                   fontSize = 14,
                   fontFamily = 'Verdana',
                   fontColor = 'black',
                   fontStyle = 'normal';
               ctx.save();
               ctx.textBaseline = 'middle';
               ctx.textAlign = 'center';
               ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
               ctx.fillStyle = fontColor;
               ctx.fillText(value, x, y - radius - fontSize);
               ctx.restore();
            });
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>