可点击图表数据点以打开新页面
Clickable chart data points to open new pages
我希望能够单击栏并直接打开与该栏关联的新页面。
我研究过并能够使 x 轴可点击,但我需要条形图或圆圈可点击。
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'bar'
},
axis: {
rotated: true
}
});
var arrayOfLinks = [
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
];
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>");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js"></script>
<div id="chart"></div>
我几乎可以肯定修复就在这行代码中:
d3.selectAll('.c3-axis-x .tick tspan')
参数应该是什么? 'data.coloums[1]','bar'
?
请说明一下。
正如问题中 here 指出的那样,对于条形图,您可以在传入数据时指定一个 onclick
函数。这个函数可以触发偶数到window.open
link.
代码片段在这里:
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'bar',
//define the onclick function
onclick: function (d) {
console.log(d) //checks the data
//note that the index for the values gets passed as d.x
window.open(arrayOfLinks[d.x]);
},
},
axis: {
rotated: true
},
});
代码的完整工作块在此处:
http://bl.ocks.org/akulmehta/87f4903a4686deb8285381b8e816ce4d
我希望能够单击栏并直接打开与该栏关联的新页面。
我研究过并能够使 x 轴可点击,但我需要条形图或圆圈可点击。
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'bar'
},
axis: {
rotated: true
}
});
var arrayOfLinks = [
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
"http://google.com",
];
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>");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js"></script>
<div id="chart"></div>
我几乎可以肯定修复就在这行代码中:
d3.selectAll('.c3-axis-x .tick tspan')
参数应该是什么? 'data.coloums[1]','bar'
?
请说明一下。
正如问题中 here 指出的那样,对于条形图,您可以在传入数据时指定一个 onclick
函数。这个函数可以触发偶数到window.open
link.
代码片段在这里:
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'bar',
//define the onclick function
onclick: function (d) {
console.log(d) //checks the data
//note that the index for the values gets passed as d.x
window.open(arrayOfLinks[d.x]);
},
},
axis: {
rotated: true
},
});
代码的完整工作块在此处:
http://bl.ocks.org/akulmehta/87f4903a4686deb8285381b8e816ce4d