如何将自定义工具提示项添加到Apexcharts？

如何解决如何将自定义工具提示项添加到Apexcharts？

我正在使用ApexChart，我想向工具提示中添加更多信息（在悬停时显示）。我已经阅读了文档，但是我真的不明白该怎么做。

我的问题是我不知道应该在哪里添加这些额外的数据，以及如何在工具提示中显示这些数据？

现在，我仅在工具提示中看到默认值，即系列名称和“ y”值。我想看看：

• 价格 ：（ x值）
• 数字 ：（ 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,site: 'name'
        }
      ]
    }
  ],xaxis: {
    type: "numeric"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"),options);

chart.render();

解决方法

尝试这样：

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,{
          x: 130,y: 44,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。