首页 > 编程语言> 文章详细

javascript – C3.js：独立于图例高度指定图表高度

2019-07-05 17:35:06 阅读：241 来源： 互联网

标签：javascript d3-js c3-js

(对不起双重发布,但github上的问题在一周后没有得到解答：https://github.com/c3js/c3/issues/2254)

我正在使用C3 JS,我在同一页面上显示了几个堆积的条形图.每个人都有不同的传说,有些传说比其他传说更大.由于我只能定义整个图像的高度,因此具有较大图例的图表的y轴会变小.

下图说明了这个问题：

我的目标是两个图表上的y轴具有相同的高度.整体图表高度无关紧要(图表图例).

是否有可能为图表指定固定高度而不包括此尺寸的图例高度？也许我应该直接使用D3？

感谢您的关注和这个令人敬畏的图书馆.

最好,
艾伦

解决方法:

我认为唯一的方法是使用c3js示例中的自定义图例(参见http://c3js.org/samples/legend_custom.html).

所以你必须禁用图例：

legend: {
  show: false
}

并创建自己的图例(例如使用d3.js)：

function createLegend(chart, container) {
  var dataKeys = Object.keys(chart.internal.data.xs);
  var names = chart.data.names();
	console.log("createLegend", dataKeys, names, chart);
  
  $(container).css("max-height", "none");
  $(container).css("width", chart.internal.currentWidth);
  
  d3.select(container).insert('div', '.chart').attr('class', 'legend').selectAll('div')
    .data(dataKeys)
    .enter().append('div')
    .attr('class', 'legend-item')
    .attr('data-id', function(id) {
      return id;
    })
    .each(function(id) {
      d3.select(this)
      .append('span').style('background-color', chart.color(id)).attr('class', 'legend-box');
      var text = names[id];
      if (!text) text = id;
      d3.select(this)
      .append('span').html(text).attr('class', 'legend-text');
    })
    .on('mouseover', function(id) {
      chart.focus(id);
    })
    .on('mouseout', function(id) {
      chart.revert();
    })
    .on('click', function(id) {
      $(this).toggleClass("c3-legend-item-hidden")
      chart.toggle(id);
      $(container).css("max-height", "none");
    });
}

var chart1 = c3.generate({
  bindto: '#chart1',
  size: {
    height: 250,
    width: 400
  },
  data: {
    x: 'x',
    columns: [
      ['x', 'one', 'two'],
      ['data1', 30, 200],
      ['data2', 130, 100],
      ['data3', 30, 200],
      ['data4', 130, 100],
      ['data5', 30, 1200],
      ['data6', 130, 50],
      ['data7', 30, 20],
      ['data8', 130, 100],
      ['data9', 230, 10]
    ],
    type: 'bar',
    names: {
      data1: 'Long Name 1',
      data2: 'Long Name 2',
      data3: 'Long Name 3',
      data4: 'Long Name 4',
      data5: 'Long Name 5',
      data6: 'Long Name 6',
      data7: 'Long Name 7',
      data8: 'Long Name 8',
      data9: 'Long Name 9',
    },
    groups: [
      ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9']
    ]
  },
  axis: {
    x: {
      type: 'category' // this needed to load string x value
    }
  },
  legend: {
    show: false
  },
  onrendered: function() {
  	$('#chart1').css("max-height", "none");
  }
});

createLegend(chart1, '#chart1');

/* only to highlight chart container */
.chart {
  background: lightgray;
  border: solid 1px red;
}

.legend-box {
  display: inline-block;
  margin-left: 7px;
  margin-right: 7px;
  padding: 5px;
}

.legend-item {
  cursor: pointer;
  display: inline-block;
}

.legend-text {
  font-family: "Helvetica";
  font-size:12px;
  white-space: nowrap;
}

.legend {
  width: 100%;
  display: inline-block;
  text-align: center;
  overflow: hidden;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js" type="text/javascript"></script>

<div id="chart1" class="chart"></div>

这是一个显示完整示例的jsfiddle：https://jsfiddle.net/beaver71/zp7km2L1/

标签：javascript,d3-js,c3-js
来源： https://codeday.me/bug/20190705/1389430.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – C3.js：独立于图例高度指定图表高度