Question

我的目的是我想在点击时将条形标签和值传递给另一个页面，这是我的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
                                }
                            }]
                        }
                    }
                });

提前致谢。

Answer 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。

如何在点击时获得Chart JS条形图栏标签和值？

1 个答案: