高于点的值 - Chart.js

Question

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

^ 一个例子:-)

试图使用谷歌找到一些东西但没有成功

提前致谢，

Answer 1

是的，有可能:-)

\n\n

然而，ChartJS 目前还没有内置的功能。您宁愿创建一个图表插件。

\n\n

\xe1\xb4\x98\xca\x9f\xe1\xb4\x9c\xc9\xa2\xc9\xaa\xc9\xb4

\n\n

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

\n\n

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

\n\n

\xe1\xb4\xa1\xe1\xb4\x8f\xca\x80\xe1\xb4\x8b\xc9\xaa\xc9\xb4\xc9\xa2\xe1\xb4\x87x\xe1\xb4\x80\xe1\xb4 \x8d\xe1\xb4\x98\xca\x9f\xe1\xb4\x87\xe2\xa7\xa9

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n