Как я могу установить пользовательские всплывающие подсказки со значениями массива в вершине тепловой карты? - PullRequest
Новая
       7

Как я могу установить пользовательские всплывающие подсказки со значениями массива в вершине тепловой карты?

3 голосов
/ 05 февраля 2020

Я использую диаграмму тепловых карт из apexcharts и хочу настроить всплывающие подсказки. Для каждого числа данных я хочу предоставить соответствующее описание в виде строки. Значения описания хранятся в простом массиве, подобном следующему:

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

Как я могу использовать поле custom в параметрах диаграммы, чтобы предоставить полям данных настраиваемые всплывающие подсказки?

chartData: 

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'/>

1 Ответ

1 голос
/ 05 февраля 2020

Вы должны внедрить 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
  }
},
...