我正在使用ApexChart,我想向工具提示中添加更多信息(在悬停时显示)。我已经阅读了文档,但是我真的不明白该怎么做。
我的问题是我不知道应该在哪里添加这些额外的数据,以及如何在工具提示中显示这些数据?
现在,我仅在工具提示中看到默认值,即系列名称和“ y”值。我想看看:
如何将其添加到工具提示中?这是我到目前为止所得到的:
提琴:https://jsfiddle.net/9m0r2ont/1/
代码:
var options = {
chart: {
height: 380,
width: "100%",
type: "scatter",
},
series: [
{
name: "Series 1",
data: [
{
x: 100,
y: 50,
product: 'name',
info: 'info',
site: 'name'
},
{
x: 150,
y: 55,
product: 'name',
info: 'info',
site: 'name'
}
]
}
],
xaxis: {
type: "numeric"
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
答案 0 :(得分:2)
尝试这样:
var options = {
chart: {
height: 380,
width: "100%",
type: "scatter",
},
series: [
{
name: "Series 1",
data: [
{
x: 100,
y: 50,
product: 'name',
info: 'info',
site: 'name'
},
{
x: 150,
y: 55,
product: 'name',
info: 'info',
site: 'name'
},
{
x: 130,
y: 44,
product: 'name',
info: 'info',
site: 'name'
}
]
}
],
xaxis: {
type: "numeric"
},
tooltip: {
custom: function({series, seriesIndex, dataPointIndex, w}) {
var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
return '<ul>' +
'<li><b>Price</b>: ' + data.x + '</li>' +
'<li><b>Number</b>: ' + data.y + '</li>' +
'<li><b>Product</b>: \'' + data.product + '\'</li>' +
'<li><b>Info</b>: \'' + data.info + '\'</li>' +
'<li><b>Site</b>: \'' + data.site + '\'</li>' +
'</ul>';
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>
为此,您需要向options
对象添加custom tooltip。访问传递给函数的w
对象以获取正确的数据。他们有一个类似的示例here。一旦确定了该对象内您感兴趣的数据,就可以使用它来返回要显示在工具提示中的HTML。