如何使用热图 apexchart 中的数组值设置自定义工具提示？

Question

我正在使用 apexcharts 的热图图表，我想自定义工具提示。对于每个数据，我想提供一个字符串形式的匹配描述。描述值存储在一个简单的数组中，如下所示：

let chartLabels = ['January', 'February', 'March'];

如何使用图表选项中的 custom 字段为数据字段提供自定义工具提示？

图表数据：

let chartData = {
    options: {
        chart: {
            toolbar: {
                show: false
            },
        },
        yaxis: {
            show: false
        },
        xaxis: {
            show: false,
            labels: {
                show: false,
            }
        },
        tooltip: {
            enabled: true,
            //custom:
        },
     },
     series: [{
        name: ' ',
        data: [24, 53, 54, 545, 545]
      },
        {
            name: ' ',
            data: [654, 454, 454, 44, 34]
        }]
};

<Chart
    options={chartData.options}
    series={chartData.series}
    type='heatmap'/>

Answer 1

您应该在系列数据本身中注入 description，以便稍后在使用自定义工具提示时轻松检索它。自定义工具提示中的 opts 参数包含检索该值所需的所有信息，如下面的代码所述。

series: [{
  name: "series1"
  data: [{
    x: "category 1"
    y: 10
    description: "TEAM A"
  }, {
    x: "category 2"
    y: 20
    description: "TEAM B"
  }]
}, {
  name: "series2"
  data: [{
    x: "category 3"
    y: 10
    description: "TEAM C"
  }, {
    x: "category 4"
    y: 20
    description: "TEAM D"
  }]
}],
tooltip: {
  custom: function(opts) {
    const desc =
      opts.ctx.w.config.series[opts.seriesIndex].data[
        opts.dataPointIndex
      ].description

    const value = opts.series[opts.seriesIndex][opts.dataPointIndex]

    return desc + ': ' + value
  }
},

如何使用热图 apexchart 中的数组值设置自定义工具提示？

How can I set custom tooltips with values of an array in a heatmap apexchart?

javascript

reactjs

apexcharts