修改Chart.JS中散点图的信息框 [英] Modify the information box of the scatter chart in Chart.JS
问题描述
我正在使用 chart.js
中的散点图,并且我需要修改高于某个点时显示的信息。我认为包含此信息的框称为 tooltip 。
I'm working with a scatter chart in chart.js
and I need to modify the info what I show when I'm above a point. I think the box that contains this information is called tooltip.
在下面,我展示我现在拥有的东西,
Below I show what I have now,
我想要做的是修改第一个,并放入 14:52
就像x轴一样。
What I want to do is modify the first one, and put 14:52
like the x-axis.
在x轴上很容易,
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
callback: function(value, index, values) {
var time = String(value);
if (time.length == 3){
time = '0' + time;
}
var hour = time[0] + time[1];
var min = time[2] + time[3];
var label = hour + ':' + min;
return label;
}
}
}]
}
}
我想在这里我必须使用相同的函数,但是我不知道在哪里。我无法访问包含信息的框,它的名称不是工具提示吗?例如,我正在执行以下代码,但没有任何变化。
And I suppose here I have to use the same function, but I don't know where. I'm not able to access to the box with the information, isn't its name tooltips? For example, I'm doing the code below but nothing change.
tooltips:{
title: "New title"
}
如何修改该框?
非常感谢
推荐答案
标题
和工具提示上的其他项目可以使用回调一个>功能。正确的语法如下所示。
The title
and other items on the tooltip can be customized using callback functions. The correct syntax looks as follows.
tooltips:{
callbacks: {
title: (tooltipItem, data) => "New title"
}
}
请同时查看以下是来自 https://www.chartjs.org/samples/的更复杂的示例Latest / tooltips / callbacks.html 。无论使用散点图
还是线
图表,都应该没有区别。
Please also have a look on the following more complex sample derived from https://www.chartjs.org/samples/latest/tooltips/callbacks.html. It should make no difference whether you work with a scatter
or a line
chart.
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: 'red',
backgroundColor: 'red',
data: [15, 22, 18, 28, 8, 13, 24],
fill: false,
}, {
label: 'My Second dataset',
borderColor: 'blue',
backgroundColor: 'blue',
data: [5, 31, 15, 22, 19, 29, 12],
fill: false,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Custom Information in Tooltip'
},
tooltips: {
mode: 'index',
callbacks: {
title: (tooltipItem, data) => data.labels[tooltipItem[0].index],
footer: (tooltipItems, data) => {
var sum = 0;
tooltipItems.forEach(function(tooltipItem) {
sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
});
return 'Sum: ' + sum;
},
},
footerFontStyle: 'normal'
},
hover: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Value'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
>
这篇关于修改Chart.JS中散点图的信息框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!