要在ApexCharts中实现分组图表的重叠工具提示,您可以使用以下代码示例:
首先,确保您已经包含了ApexCharts的库文件。然后,使用以下HTML代码创建一个具有相应id的容器元素:
接下来,在您的JavaScript代码中,您可以使用以下代码示例来配置和渲染分组图表:
// 数据示例
var options = {
series: [
{
name: 'Series 1',
data: [30, 40, 45, 50, 49, 60, 70, 91]
},
{
name: 'Series 2',
data: [23, 12, 54, 61, 32, 56, 81, 19]
},
{
name: 'Series 3',
data: [62, 12, 45, 23, 56, 87, 32, 55]
}
],
chart: {
type: 'bar',
height: 300,
stacked: true,
events: {
dataPointMouseEnter: function (event, chartContext, config) {
// 隐藏其他系列的工具提示
chartContext.w.globals.tooltip.referenceX = config.globals.gridWidth / 2
}
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
},
tooltip: {
shared: false, // 禁用共享提示
x: {
show: false // 隐藏x轴提示
}
}
};
// 渲染图表
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在上面的代码中,我们使用了分组的条形图 (type: 'bar'
) 并启用了堆叠 (stacked: true
)。在events
中,我们使用dataPointMouseEnter
事件来隐藏其他系列的工具提示。这是通过将 chartContext.w.globals.tooltip.referenceX
设置为 config.globals.gridWidth / 2
来完成的,这将使工具提示始终在每个柱子的中间位置显示。
最后,我们禁用了共享提示 (shared: false
) 并隐藏了x轴提示 (x: { show: false }
)。
这样,您就可以在ApexCharts中实现分组图表的重叠工具提示了。