如果不采取以下措施,我不确定这是否可行:但我们要确认一下。是否有一种方法可以(相对地)简单地将Chart.js标签转换为链接?这里讨论的图表是雷达图:http://www.chartjs.org/docs/#radar-chart(到目前为止,我一直在使用图例,只需对库进行少量修改即可正常工作,但现在我应该使用标签本身。)
tzxcd3kk1#
你可以监听click事件,然后循环检查所有pointLabels,如果单击是在那个框中,那么你可以从包含所有标签的数组中获取相应的标签。然后,您可以使用window.location = link或window.open(link)打开转到您的链接。在google上点击搜索颜色的例子:第一个小提琴:https://jsfiddle.net/Leelenaleee/fnqr4c7j/22/
window.location = link
window.open(link)
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 */ } } });
$("#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。
2条答案
按热度按时间tzxcd3kk1#
你可以监听click事件,然后循环检查所有pointLabels,如果单击是在那个框中,那么你可以从包含所有标签的数组中获取相应的标签。
然后,您可以使用
window.location = link
或window.open(link)
打开转到您的链接。在google上点击搜索颜色的例子:
第一个
小提琴:https://jsfiddle.net/Leelenaleee/fnqr4c7j/22/
xmd2e60i2#
虽然真的晚了但是bencekd's answer and provided code地这个非常类似如何"Add Link to X-Label Chart.js"的问题给我解决了。
注意:我不得不使用旧的Chart.js v1,它是用于条形图的,而不是雷达。你必须根据当前版本的Chart.js相应地修改它。我也不明白为什么它不应该用于雷达,只需稍加重构。
代码(其中小调由我唱,注解由“/*”标明我的台词):
和他们提供的Fiddle。