|
|
|
|
步骤 2 : 非交叉点 步骤 3 : 出现位置-中间 步骤 4 : 回调函数
默认就是这样，需要把鼠标放在交叉点上才会显示提示信息。
tooltips: { intersect: true, }, intersect的值不写就是默认 true <script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-1',
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-2',
},
]
},
options:{
scales:{
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
},
tooltips: {
intersect: true,
},
}
});
</script>
intersect 修改成 false, 就表示鼠标移动到图表就会出现提示信息了。 nearest 表示显示最近的一根线的信息。
tooltips: { mode: 'nearest', intersect: false, }, <script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-1',
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-2',
},
]
},
options:{
scales:{
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
},
tooltips: {
mode: 'nearest',
intersect: false,
},
}
});
</script>
有时候要显示多根线的信息，并且出现在中间位置，那么就可以使用 index
tooltips: { mode: 'index', intersect: false, }, <script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-1',
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-2',
},
]
},
options:{
scales:{
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
},
tooltips: {
mode: 'index',
intersect: false,
},
}
});
</script>
通过callbacks 函数可以自定义提示文字里的显示信息
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
<div style="width:400px;margin:0px auto">
<canvas id="myChart" ></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['红', '蓝', '黄', '绿', '紫', '橙'],
datasets: [
{
label: '示例1',
data: [12, 19, 3, 5, 0, 3],
borderColor:'blue',
backgroundColor:'skyBlue',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-1',
},
{
label: '示例2',
data: [182, 51, 133, 54, 105, 96],
borderColor:'red',
backgroundColor:'pink',
borderWidth: 1,
fill: false,
yAxisID: 'y-axis-2',
},
]
},
options:{
scales:{
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += '的数值是: ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
},
},
}
});
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
