如何在图例悬停时显示工具提示?
How to show tooltip on legend hover?
我在 React 中使用 chart.js。
我已阅读并实施:
Chart.js - show tooltip when hovering on legend
不幸的是,这没有提供预期的结果。我相信这是因为这正在 javascript 中实现,而我正在实现 React。不确定这是否会产生任何影响。
const data = {
labels: ['One', 'Two', 'Three'],
datasets: [{
data: [4, 5, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
borderWidth: 1,
hoverBorderWidth: 3
}]
};
const options = {
plugins: {
legend: {
onHover: (evt: any, legendItem: any, legend: any) => {
const index = legend.chart.data.labels.indexOf(legendItem.text);
const activeSegment = legend.chart.getDatasetMeta(0).data[index];
// console.log(activeSegment);
// activeSegment.options.backgroundColor = activeSegment._options.hoverBackgroundColor;
// activeSegment.options.borderWidth = activeSegment._options.hoverBorderWidth;
legend.chart.tooltip._active = [activeSegment];
legend.chart.update();
legend.chart.draw();
},
onLeave: (evt: any, legendItem: any, legend: any) => {
const index = legend.chart.data.labels.indexOf(legendItem.text);
// const activeSegment = legend.chart.getDatasetMeta(0).data[index];
// activeSegment.options.backgroundColor = activeSegment._options.backgroundColor;
// activeSegment.options.borderWidth = activeSegment._options.borderWidth;
legend.chart.tooltip._active = [];
legend.chart.update();
legend.chart.draw();
}
},
},
}
此组件结束时返回以下内容:
return <Doughnut data={data} options={options} />;
这会生成我链接的 Whosebug post 中显示的图表。
对于 v3,您可以使用一种方法以编程方式设置工具提示
onHover: (evt, item, legend) => {
const chart = legend.chart;
const tooltip = chart.tooltip;
const chartArea = chart.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: item.index,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
chart.update();
},
我在 React 中使用 chart.js。
我已阅读并实施: Chart.js - show tooltip when hovering on legend
不幸的是,这没有提供预期的结果。我相信这是因为这正在 javascript 中实现,而我正在实现 React。不确定这是否会产生任何影响。
const data = {
labels: ['One', 'Two', 'Three'],
datasets: [{
data: [4, 5, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
borderWidth: 1,
hoverBorderWidth: 3
}]
};
const options = {
plugins: {
legend: {
onHover: (evt: any, legendItem: any, legend: any) => {
const index = legend.chart.data.labels.indexOf(legendItem.text);
const activeSegment = legend.chart.getDatasetMeta(0).data[index];
// console.log(activeSegment);
// activeSegment.options.backgroundColor = activeSegment._options.hoverBackgroundColor;
// activeSegment.options.borderWidth = activeSegment._options.hoverBorderWidth;
legend.chart.tooltip._active = [activeSegment];
legend.chart.update();
legend.chart.draw();
},
onLeave: (evt: any, legendItem: any, legend: any) => {
const index = legend.chart.data.labels.indexOf(legendItem.text);
// const activeSegment = legend.chart.getDatasetMeta(0).data[index];
// activeSegment.options.backgroundColor = activeSegment._options.backgroundColor;
// activeSegment.options.borderWidth = activeSegment._options.borderWidth;
legend.chart.tooltip._active = [];
legend.chart.update();
legend.chart.draw();
}
},
},
}
此组件结束时返回以下内容:
return <Doughnut data={data} options={options} />;
这会生成我链接的 Whosebug post 中显示的图表。
对于 v3,您可以使用一种方法以编程方式设置工具提示
onHover: (evt, item, legend) => {
const chart = legend.chart;
const tooltip = chart.tooltip;
const chartArea = chart.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: item.index,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
chart.update();
},