作者:babe | 来源:互联网 | 2023-02-08 09:05
我显示了包含两种类型的图表。现在,我想隐藏一个数据集的工具栏。我在GitHub上看到了类似的讨论,但是这并没有使我进一步。
这是我的图表的示例:
Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("chart").getContext("2d");
var data = {
labels: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
datasets: [
{
label: "Test",
type: 'bar',
backgroundColor: "#F29220",
borderColor: "#F29220",
data: [4,1,1,2,2,2,2,2,2,2,2,1]
},
{
label: "Test2",
type: 'bar',
backgroundColor: "#F29220",
borderColor: "#F29220",
data: [4,0,0,0,0,0,0,0,0,0,0,0]
},
{
label: "",
type: 'line',
fillColor: "rgba(220,220,220,0)",
pointColor: "rgba(220,220,220,0)",
borderColor: "#FF0000",
tooltip: false,
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
}]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: '#000',
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
fontColor: '#000',
callback: function(label, index, labels) {
return label + '%';
}
},
}]
},
elements: {
point:{
radius: 0
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
}
}
}
}
});
如何隐藏仅用于折线图的工具提示?正如您在代码中看到的那样,我已经尝试插入属性“ tooltip”,但这是行不通的。
1> Florian Mose..:
现在有一种方法可以配置charjs来做到这一点;只需使用filter属性:
tooltips: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
}
}