Chart.js将标签转换为链接

cnwbcb6i  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(143)

如果不采取以下措施,我不确定这是否可行:但我们要确认一下。
是否有一种方法可以(相对地)简单地将Chart.js标签转换为链接?这里讨论的图表是雷达图:http://www.chartjs.org/docs/#radar-chart(到目前为止,我一直在使用图例,只需对库进行少量修改即可正常工作,但现在我应该使用标签本身。)

tzxcd3kk

tzxcd3kk1#

你可以监听click事件,然后循环检查所有pointLabels,如果单击是在那个框中,那么你可以从包含所有标签的数组中获取相应的标签。
然后,您可以使用window.location = linkwindow.open(link)打开转到您的链接。
在google上点击搜索颜色的例子:
第一个
小提琴:https://jsfiddle.net/Leelenaleee/fnqr4c7j/22/

xmd2e60i

xmd2e60i2#

虽然真的晚了但是bencekd's answer and provided code地这个非常类似如何"Add Link to X-Label Chart.js"的问题给我解决了。
注意:我不得不使用旧的Chart.js v1,它是用于条形图的,而不是雷达。你必须根据当前版本的Chart.js相应地修改它。我也不明白为什么它不应该用于雷达,只需稍加重构。
代码(其中小调由我唱,注解由“/*”标明我的台词):

$("#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
                    /* barChartData didn't work for me, so disabled above */
                    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
                    /* I made to go where I wanted here with a window.location.href
                    and taking the label (ret[bar_index]) as an argument */
                }
            }
       }
);

和他们提供的Fiddle

相关问题