chart.js 散点图 - 在工具提示中显示特定于点的标签
[英]chart.js scatter chart - displaying label specific to point in tooltip
问题描述
I'm trying to build a chart.js scatter chart where upon the user hovering over the scatter point, the tool tip reveals the label that is specific to that point.
我正在尝试构建一个 chart.js 散点图，当用户将鼠标悬停在散点上时，工具提示会显示特定于该点的标签。
So each data point would have it's x and y values, and also it's label.所以每个数据点都有它的 x 和 y 值，还有它的标签。
So far I've got到目前为止我有
var ctx = document.getElementById('myChart').getContext('2d'); var scatterChart = new Chart(ctx, { type: 'scatter', data: { datasets: [{ labels: ["Label 1","Label 2","Label 3"], data: [{ x: -10, y: 0, }, { x: 0, y: 10 }, { x: 10, y: 5 }] }] }, options: { tooltips: { callbacks: { label: function(tooltipItem, data) { var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; var label = data.labels[tooltipItem.index]; return datasetLabel + ': ' + label; } } } } });
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> </head> <canvas id="myChart" style = "height:1000px"></canvas>
When I hover over each point, I'd like to see either 'label 1', 'label 2' or 'label 3' appear.当我将鼠标悬停在每个点上时，我希望看到“标签 1”、“标签 2”或“标签 3”出现。
Thanks very much非常感谢
3 个解决方案
解决方案1
24 已采纳 2017-06-20 19:58:22
You can achieve this using the following tooltips label callback function ...您可以使用以下工具提示标签回调函数实现此目的...
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var ctx = document.getElementById('myChart').getContext('2d'); var scatterChart = new Chart(ctx, { type: 'scatter', data: { labels: ["Label 1", "Label 2", "Label 3"], datasets: [{ label: 'Legend', data: [{ x: -10, y: 0, }, { x: 0, y: 10 }, { x: 10, y: 5 }] }] }, options: { tooltips: { callbacks: { label: function(tooltipItem, data) { var label = data.labels[tooltipItem.index]; return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')'; } } } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChart" style="height:1000px"></canvas>
解决方案2
5 2019-05-14 13:50:51
For multiple labels GRUNT 's answer needs to be modified to use tooltipItem.datasetIndex instead of tooltipItem.index:对于多个标签 GRUNT 的答案需要修改为使用tooltipItem.datasetIndex而不是 tooltipItem.index：
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.datasetIndex];
return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
}
}
} }
解决方案3
2 2021-05-01 17:43:59
As of Chart.js version 3, callbacks are handled a little differently.从 Chart.js 版本 3 开始，回调的处理方式略有不同。 Here is a working example with 3.2.0.这是 3.2.0 的工作示例。 Relevant docs: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback相关文档： https : //www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
ctx = document.getElementById("myChart").getContext("2d"); let data = { datasets: [{ label: "Legend", labels: ["Label 1", "Label 2", "Label 3"], data: [{ x: -10, y: 0, }, { x: 0, y: 10 }, { x: 10, y: 5 }], backgroundColor: "rgb(255, 99, 132)" }] } let options = { plugins: { tooltip: { callbacks: { label: function(ctx) { // console.log(ctx); let label = ctx.dataset.labels[ctx.dataIndex]; label += " (" + ctx.parsed.x + ", " + ctx.parsed.y + ")"; return label; } } } } } scatterChart = new Chart(ctx, { type: "scatter", data: data, options: options });
<canvas id="myChart" height="500"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.