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

Question

我正在使用 ApexChart，我想向工具提示添加一些更多信息（悬停时显示）。我已阅读文档，但我真的不明白如何做到这一点。

\n

我的问题是我不明白应该在哪里添加额外数据以及如何使其显示在工具提示中？

\n

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

\n

\n
• 价格：（x 价值）
\n
• 数量：（y 值）
\n
• 产品名称\'，
\n
• 信息：\'信息\',
\n
• 站点：\'名称\'
\n

\n

如何将其添加到工具提示中？这是我到目前为止得到的：

\n

小提琴： https: //jsfiddle.net/9m0r2ont/1/

\n

代码：

\n

var options = {\n  chart: {\n    height: 380,\n    width: "100%",\n    type: "scatter",\n  },\n  series: [\n    {\n      name: "Series 1",\n      data: [\n        {\n          x: 100,\n          y: 50,\n          product: \'name\',\n          info: \'info\',\n          site: \'name\'\n        },\n        {\n          x: 150,\n          y: 55,\n          product: \'name\',\n          info: \'info\',\n          site: \'name\'\n        }\n      ]\n    }\n  ],\n  xaxis: {\n    type: "numeric"\n  }\n};\n\nvar chart = new ApexCharts(document.querySelector("#chart"), options);\n\nchart.render();\n

\n

Answer 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'
        },
        {
          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。访问w传递给函数的对象以获取正确的数据。他们这里有一个类似的例子。一旦您可以识别该对象中您感兴趣的数据，就可以使用它返回要在工具提示中显示的 HTML。