添加 X-Label Chart.js 的链接

Question

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

但是，重复调用getBarsAtEvent(createdClickEvent)会给我一个Uncaught TypeError ("Cannot read property 'getBoundingClientRect' of null")，这必定意味着该getBarsAtEvent方法在模拟单击时调用时实际上不会返回任何内容。

任何建议或替代方法将不胜感激，提前致谢。

Answer 1

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

下面是一种方法，这里是一个使用此代码/方法的小提琴。希望能帮助到你。

    $("#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
                }
            }
       }
);