试图获得ChartJS中单击栏的_index

问题描述 投票:0回答:1

我在Vue图表中有一个条形图,单击该位置时,我想在表格中显示背景数据。这是渲染

startPie: function(canvas, type){
                let chart = new Chart(canvas, {
                    type: type,
                    data: {
                        labels: this.labels,
                        datasets: this.chart_data
                    },
                    options: {
                        responsive: true,
                        animation:{ animateScale:true },
                        title: { display: false },
                        legend: { display: false },
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    color: "#989898"
                                },
                                ticks: {
                                    fontColor: "#989898",
                                    fontSize: 16,
                                    beginAtZero: true,
                                    callback: function(value) {
                                        let ranges = [
                                            { divider: 1e6, suffix: 'M' },
                                            { divider: 1e3, suffix: 'k' }
                                        ];
                                        function formatNumber(n) {
                                            for (let i = 0; i < ranges.length; i++) {
                                                if (n >= ranges[i].divider) {
                                                    return (n / ranges[i].divider).toString() + ranges[i].suffix;
                                                }
                                            }
                                            return n;
                                        }
                                        return '$' + formatNumber(value);
                                    }
                                }
                            }],
                            xAxes: [{
                                ticks: {
                                    fontColor: "#989898",
                                    fontSize: 12
                                }
                            }]
                        },
                        plugins: {
                            datalabels: {
                                anchor: 'center',
                                font: {
                                    size: 16,
                                    weight: 'bold'
                                },
                                formatter: function(value, context) {
                                    return '$' + Number(value).toLocaleString();
                                },
                                color: 'white'
                            }
                        },
                        'onClick':(evt, item) => {
                            console.log('CLICK', item[0]);
                        }
                    }
                })
            }

在控制台的onClick事件中,我可以看到索引

CLICK ChartElement。{_ chart:图表,_datasetIndex:0,_index:4,隐藏:false,_xScale:ChartElement,…}

尽管没有错误,我仍然无法访问它。我试过了item[0]._indexitem[0]['_index']item[0]['ChartElement']._indexitem[0]['ChartElement']['_index']

感谢您的任何帮助。

vuejs2 chart.js
1个回答
0
投票

[不幸的是,onClick事件处理程序的文档不多。您可以尝试以下操作:

onClick
© www.soinside.com 2019 - 2024. All rights reserved.