最近我将一个依赖于 Chart.js 的旧项目从 v1 移到 v2。
但我无法重新创建多标签工具提示，如下所示。
在 v1 中，此功能默认启用。有谁知道我必须更改哪个选项才能存档。
到目前为止我的代码。
new Chart(document.getElementById('mainChart'), {
type: 'line',
data: {
labels: labels,
datasets: [
{ data: data, label: "Expenses", fill: false
]
},
options: {
animation: { duration: 0 },
hover: { animationDuration: 0 },
responsiveAnimationDuration: 0
}
});
这可以使用mode工具提示部分中的选项进行设置。将模式设置index为可能是您正在寻找的模式。
new Chart(document.getElementById('mainChart'), {
type: 'line',
data: {
labels: labels,
datasets: [
{ data: data, label: "Expenses", fill: false }
]
},
options: {
animation: { duration: 0 },
hover: { animationDuration: 0 },
responsiveAnimationDuration: 0,
tooltips: { mode: 'index' }
}
});
下面是一个示例mode: 'index'：
new Chart(document.getElementById('chartJSContainer'), {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6"],
datasets: [{
data: [7, 11, 5, 8, 3, 7],
label: "Income",
fill: false,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
}, {
data: [12, 19, 3, 5, 2, 3],
label: "Expenses",
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
}
]
},
options: {
animation: {
duration: 0
},
hover: {
animationDuration: 0
},
responsiveAnimationDuration: 0,
tooltips: {
mode: 'index'
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>