问题描述

我希望能够在 Chart.js bar 图表中链接 x-labels.我已经进行了相当彻底的搜索，最终试图提出自己的解决方案:因为标签对应于它们正上方的条形图，并且 Chart.js 有一个内置的 getBarsAtEvent(evt) 方法，如果用户没有点击图表，我尝试创建一个事件 - 这个新事件的 pageX 和 pageY 位于初始点击的正上方，这样如果用户有单击标签，新事件将模拟对条形图的单击.

I'm looking to be able to link the x-labels in a Chart.js bar chart. I've searched pretty thoroughly, and ended up trying to come up with my own solution: because the labels correspond to the bars directly above them and Chart.js has a built in getBarsAtEvent(evt) method, I tried creating an event if the user didn't click on a chart - this new event had pageX and pageY that was directly above the initial click such that if the user had clicked on a label, the new event would simulate a click on the bar graph.

但是，重复调用 getBarsAtEvent(createdClickEvent) 会给我一个 Uncaught TypeError ("Cannot read property 'getBoundingClientRect' of null")，这一定意味着 >getBarsAtEvent 方法在我的模拟点击上调用时，实际上并没有返回任何内容.

However, calling getBarsAtEvent(createdClickEvent) repeatedly gives me a Uncaught TypeError ("Cannot read property 'getBoundingClientRect' of null"), which must mean that the getBarsAtEvent method, when called on my simulated click, isn't actually returning anything.

任何建议或替代方法将不胜感激，在此先感谢.

Any suggestions or alternate approaches would be greatly appreciated, thanks in advance.

推荐答案

另一种方法是确定用户实际点击的点，并根据该点计算点击了哪个标签.为此，您将需要有关创建的图表的一些信息，并且必须进行一些计算.

An alternative approach would be to determine the point where the user is actually clicked and based on that calculate which label was clicked. For that you will need some information about the chart created and have to do some calculations.

下面是这样做的一种方法，这里有一个 Fiddle 与此代码/方法.希望对您有所帮助.

Below is a way of doing that, and here is a Fiddle with this code/approach. Hope it helps.

    $("#canvas").click( 
       function(evt){
            var ctx = document.getElementById("canvas").getContext("2d");
            // from the endPoint we get the end of the bars area
            var base = myBar.scale.endPoint;
            var height = myBar.chart.height;
            var width = myBar.chart.width;
            // only call if event is under the xAxis
            if(evt.pageY > base){
                // how many xLabels we have
                var count = myBar.scale.valuesCount;
                var padding_left = myBar.scale.xScalePaddingLeft;
                var padding_right = myBar.scale.xScalePaddingRight;
                // calculate width for each label
                var xwidth = (width-padding_left-padding_right)/count;
                // determine what label were clicked on AND PUT IT INTO bar_index 
                var bar_index = (evt.offsetX - padding_left) / xwidth;
                // don't call for padding areas
                if(bar_index > 0 & bar_index < count){
                    bar_index = parseInt(bar_index);
                    // either get label from barChartData
                    console.log("barChartData:" + barChartData.labels[bar_index]);
                    // or from current data
                    var ret = [];
                    for (var i = 0; i < myBar.datasets[0].bars.length; i++) {
                        ret.push(myBar.datasets[0].bars[i].label)
                    };
                    console.log("current data:" + ret[bar_index]);
                    // based on the label you can call any function
                }
            }
       }
);   

这篇关于添加指向 X-Label Chart.js 的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！