我正在使用Chart.js 2.x折线图来创建时间轴事件图表 .
它运作良好,但我可以't figure out how to show a tooltip when the mouse goes over a line. The information I want to show is the same shown in the labels (in the example below '标签A ', '标签B ' or '标签C' . 我试图添加工具提示选项 enabled = true
和 mode = label
但它不起作用 .
这是我的JSFiddle
这是我的代码:
HTML
<div style="height: 250px;">
<canvas id="timeline"></canvas>
</div>
使用Javascript
var ctx = $("#timeline").get(0).getContext("2d");
var data = {
labels: ['Red','Blue','Yellow'],
datasets: [
{
label: 'Label A',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2014,01,01),
y: 3
}, {
x: new Date(2017,10,01),
y: 3
}
]
},
{
label: 'Label B',
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2009,01,01),
y: 2
}, {
x: new Date(2012,09,01),
y: 2
}
]
},
{
label: 'Label C',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: new Date(2017,01,01),
y: 1
}, {
x: new Date(2017,08,01),
y: 1
}
]
},
]
};
var options = {
maintainAspectRatio: false,
legend : {
display : true
},
scales: {
xAxes: [{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'bottom',
ticks : {
beginAtzero :true
}},
{
type: 'time',
unit: 'month',
unitStepSize: 1,
time: {
displayFormats: {
'month': 'MM/YY',
'quarter': 'MM/YY'
}
},
position: 'top',
ticks : {
beginAtzero :true
}
}],
yAxes : [{
display: false,
scaleLabel : {
display : false
},
ticks : {
beginAtZero :true,
max : 5
}
}]
},
tooltips: {
enabled: true,
mode: 'label',
},
};
var scatterChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
1 回答
我必须将
intersect: false
属性添加到工具提示中Updated JSFiddle
工具提示代码: