如何在点击时获取 Chart JS 条形图条形标签和值？答案

【问题标题】：How can i get the Chart JS Bar Graph Bar Label and Value on click?如何在点击时获取 Chart JS 条形图条形标签和值？
【发布时间】：2018-04-17 15:43:32
【问题描述】：

我的目的是我想在点击时将条形标签和值传递给另一个页面，这是我的 Chart JS 代码，我该如何实现我的目的？

var barCtx = document.getElementById("CHRTID");
                var myBarChart = new Chart(barCtx, {
                    type: 'bar',
                    data: {
                        labels: [ JAN,FEB,MAR ],
                        datasets: [{
                            label: 'Order Entry by Date',
                            data: [10,25,95],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 0.2)'
                            ],
                            borderWidth: .25
                        }]
                    },
                    options: {
                        onClick: function(event) {
                           var activePoints = this.getBarsAtEvent(event);
                           var Values = activePoints[0].label + ' = ' + activePoints[0].value;
                          alert(Values);                       
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });

提前致谢。

【问题讨论】：

标签： jsp charts chart.js

【解决方案1】：

您可以使用window.location.replace() 重定向到另一个页面，并在查询字符串中传递参数，如下所示：

onClick: function(c,chart_instances){
    try{
        ev = chart_instances[0];
        window.location.replace("./yourNextPage?label=" + this.data.labels[ev._index] + "&value=" + this.data.datasets.data[ev._index]);

    } catch (e){
        //ignore misclicks
    }
}

请参阅this question，了解从下一页的查询字符串中检索数据的说明。

【讨论】：