将链接添加到X-Label Chart.js [英] Add Link to X-Label Chart.js

问题描述

我希望能够在Chart.js bar 图表中链接x标签.我进行了彻底的搜索，最终尝试提出自己的解决方案:因为标签对应于标签正上方的条形图，并且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(无法读取属性'getBoundingClientRect'为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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！