有没有一种方法可以在C3.js刻度标签中添加链接? [英] Is there a way of putting a link in a C3.js tick label?
问题描述
我有一个带有反向X/Y轴的条形图.这是我的代码和输出:
I have a bar plot with inverted X/Y Axes. Here is my code and output:
var myData = {};
myData.x = 'x';
myData.xFormat = "%Y-%m-%d";
myData.type = 'bar';
myX = app.reportsCollection.countedByDay.plotData.X;
myY = app.reportsCollection.countedByDay.plotData.Y;
myX.splice(0,0,'x');
myY.splice(0,0,'Nuevos Reportes');
myData.columns = [];
myData.columns.push(myX);
//http://stackoverflow.com/a/586189/1862909
myData.columns.push(myY);
var chart = c3.generate({
bindto: elementID,
data: myData,
size: {
height: 300
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%b-%d"
}
},
},
legend: {
show: false
}
});
我需要链接到X刻度标签上的特定页面.在示例中, Otra
应该是超链接.
What I need is to link to specific pages on the X tick labels. In the example, Otra
should be a hyperlink.
我试图将链接作为文本包含在 myX
变量中,但是没有用.
I tried to include the link as text in the myX
variable, but it didn't work.
任何想法如何做到这一点?
Any idea how to do this?
推荐答案
不是开箱即用的,c3会将刻度标签呈现为tspan元素,并使用d3的.text函数将其添加,因此尝试在< A>中进行模板化
元素作为c3的tick函数中的文本不起作用.
Not out the box, c3 renders tick labels as tspan elements and adds them using d3's .text function, so trying to template in <A>
elements as text in c3's tick functions doesn't work.
Have a look though at Mark's accepted answer here (not my one) - put a icon on graph c3.js - d3.js - that shows how to replace tick labels in c3 with other elements. It wouldn't be too hard to change that to take the existing text and then wrap it with a couple of A tags, include the appropriate href and re-add it as html.
实际上,tspans可以直接包含A标签,因此可以这样进行- http://jsfiddle.net/k9Dbf/745/.很难确定它应该是xlink:href而不只是href ...
In fact, tspans can include A tags directly, so it can be done like this - http://jsfiddle.net/k9Dbf/745/. The hard bit was figuring out it should be xlink:href not just href...
重要的小提琴:
d3.selectAll('.c3-axis-x .tick tspan')
.each(function(d,i){
// augment tick contents with link
var self = d3.select(this);
var text = self.text();
self.html("<A xlink:href='"+arrayOfLinks[i]+"'>"+text+"</A>");
});
解决方案2:您也可以完全跳过A元素,并在tspan上使用单击侦听器,尽管它现在需要一些CSS才能提供光标指示符
Solution 2: you could also skip the A element altogether and use a click listener on the tspan, though it now needs a bit of css to give the cursor indicator
d3.selectAll('.c3-axis-x .tick tspan')
.on("click", function(d,i){
window.open(arrayOfLinks[i], "_blank");
});
.c3-axis-x .tick tspan:hover {
cursor: pointer;
}
这篇关于有没有一种方法可以在C3.js刻度标签中添加链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!