0
我使用Chart.js 2.x折线图来创建时间轴事件图表。Chart JS 2.x:如何在时间轴图表中显示工具提示?
它运行良好,但我无法弄清楚当鼠标移过一条线时如何显示工具提示。我想要显示的信息与标签中显示的相同(在“标签A”,“标签B”或“标签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
});
我认为你需要这个 - https://stackoverflow.com/questions/17064913/显示工具提示功能于帆布图表 –