我有一个带有倒置 X/Y 轴的条形图。这是我的代码和输出:
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
应该是超链接。
我试图将链接作为文本包含在 myX
变量中,但没有成功。
知道怎么做吗?
最佳答案
并非开箱即用,c3 将刻度标签呈现为 tspan 元素并使用 d3 的 .text 函数添加它们,因此尝试在 <A>
中进行模板化元素作为文本在 c3 的刻度函数中不起作用。
在这里看看 Mark 接受的答案(不是我的)- put a icon on graph c3.js - d3.js - 展示了如何用其他元素替换 c3 中的刻度标签。更改它以获取现有文本然后用几个 A 标记将其包装起来并不会太难,包括适当的 href 并将其重新添加为 html。
其实tspans是可以直接include A标签的,所以可以这样做- http://jsfiddle.net/k9Dbf/745/ .困难的一点是弄清楚它应该是 xlink:href 而不仅仅是 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 来提供光标指示器
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;
}
关于javascript - 有没有办法在 C3.js 刻度标签中放置链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36412296/