前端之家

  1. 首页
  2. 问答

可点击的图表数据点以打开新页面

• 问答

我希望能够单击栏并直接打开与该栏关联的新页面。

我已经研究过并能够使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",];

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'吗？

请阐明一下。

wkz123456 回答：可点击的图表数据点以打开新页面

正如本期中的here所指出的，对于条形图，您可以在传递数据时指定一个onclick函数。此功能可以触发偶数window.open链接。

代码片段在这里：

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

c3.jsd3.jsjavascript
本文链接：https://www.f2er.com/3165314.html

大家都在问