apexcharts - 如何访问 Apexchart 的 dataPointSelection 函数的值

Question

如何通过单击工具提示访问 Apex 图表的数据值？

我不想要索引。我需要价值。我如何访问该值？

<script>
var options = {
    chart: {
        type: 'line',
        events: {
            dataPointSelection: function (event, chartContext, config) {
                console.log(config);
                var ix = config.dataPointIndex;

                alert(ix);

            }
        }
    },
    series: [{
        name: 'TEST',
        data: [[1324508400000, 34], [1324594800000, 54], [1325604800000, 39] , [1326236400000, 43]]
    }],
    xaxis: {

    },
    tooltip: {
        intersect: true,
        shared: false
    },
    markers: {
        size: 6,
    }
}

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

chart.render();
</script>

Answer 1

这对我有用：

dataPointSelection: (event, chartContext, config) => {
  console.log(config.w.config.series[config.dataPointIndex])
  console.log(config.w.config.labels[config.dataPointIndex])
}

密码箱

Answer 2

您可以使用功能点击

click(event, chartContext, config) {
            console.log(config.seriesIndex);
            console.log(config.dataPointIndex); 
}

https://apexcharts.com/docs/options/chart/events/

Answer 3

解决方案的更新/扩展，用于饼图：

chart: {
    ...
    type: 'pie',
    events: {
        dataPointSelection: function(event, chartContext, config) {
            console.log(config.w.config.labels[config.dataPointIndex]);
            console.log(config.w.config.series[config.dataPointIndex]);
        }
    }
},
...

对于圆环图：

chart: {
    ...
    type: 'donut',
    events: {
        dataPointSelection: function(event, chartContext, config) {
            console.log(config.w.config.labels[config.dataPointIndex]);
            console.log(config.w.config.series[config.dataPointIndex]);
        }
    }
},
...

对于条形图：

chart: {
    ...
    type: 'bar',
    events: {
        dataPointSelection: function(event, chartContext, config) {    
       console.log(config.w.config.xaxis.categories[config.dataPointIndex]);
            console.log(config.w.config.series[0].data[config.dataPointIndex]);
        }
    }
},
...

很抱歉最后一个片段的缩进，发布工具的行为很奇怪，代码行很长。