Chart.js 如何显示标签的光标指针&折线图中的图例 [英] Chart.js how to show cursor pointer for labels & legends in line chart
本文介绍了Chart.js 如何显示标签的光标指针&折线图中的图例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下使用 chart.js 的折线图示例.我要展示:
I have the following example of line chart using chart.js. I want to show:
- 图例和指针光标悬停标签
- 在线悬停显示所有标签数据
var line_chart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data: [15, 25, 15],
label: "My Dataset1",
borderColor: "#00F",
fill: false
}, {
data: [35, 15, 25],
label: "My Dataset2",
borderColor: "#F00",
fill: false
}
]
},
options: {
tooltips: {
mode: 'label',
},
hover: {
mode: 'label'
},
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
推荐答案
更好的方法
不需要jQuery来选择画布元素(line-chart
).
1 ▸ 解决方案:
在图表选项中添加以下内容:
add the following in your chart options :
legend: {
onHover: function(e) {
e.target.style.cursor = 'pointer';
}
},
hover: {
onHover: function(e) {
var point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = 'pointer';
else e.target.style.cursor = 'default';
}
}
2 ▸ 解决方案:
设置工具提示的 mode
为dataset
:
set tooltip's mode
to dataset
:
tooltips: {
mode: 'dataset'
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var line_chart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['May', 'June', 'July'],
datasets: [{
data: [15, 25, 15],
label: "My Dataset1",
borderColor: "#00F",
fill: false
}, {
data: [35, 15, 25],
label: "My Dataset2",
borderColor: "#F00",
fill: false
}]
},
options: {
tooltips: {
mode: 'dataset',
},
legend: {
onHover: function(e) {
e.target.style.cursor = 'pointer';
}
},
hover: {
onHover: function(e) {
var point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = 'pointer';
else e.target.style.cursor = 'default';
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style='width:80%'>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
这篇关于Chart.js 如何显示标签的光标指针&折线图中的图例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文