简体   繁体   English

Highchart:如何计算条形图中每个条形之间的距离

[英]Highchart: How to calculate the distance between each bar in Bar chart

I need to show all the text in label without ellipsis, But I cannot predict the number of lines that the label will take. 我需要在标签中显示所有文本而没有省略号,但是我无法预测标签将要使用的行数。

  1. Is it possible to give some margin between each label and show the bar in center align to label? 是否可以在每个标签之间留出一定的余量,并显示中心条与标签对齐? (with or without varying the distance between each bar) (无论是否改变每个小节之间的距离)
  2. Is it possible to calculate the distance between each bar? 是否可以计算每个条之间的距离?
  3. Is it possible to calculate the number of lines the label will take? 是否可以计算标签将要使用的行数?

Here I am setting the height of the chart with number of bars in it with a random guess of each label taking 4 lines. 在这里,我用条形图的数量来设置图表的高度,并随机猜测每个标签有4条线。

Image is altered, Sometimes it there are labels with single lines & some times multiple lines. 图像已更改,有时标签上有单行,有时有多行。

Example: 例:

范例图片

This information may be useful in context of the question 3. (answers for questions 1 & 2 appeared in the comments below the question): 问题3的背景下,此信息可能很有用 (问题1和2的答案出现在问题下方的注释中):

Dividing a label text to separate lines (in case when useHTML === false ) is performed in Highcharts.SVGRenderer.prototype.buildText function. Highcharts.SVGRenderer.prototype.buildText函数中,将标签文本划分为不同的行(如果useHTML === false )。

In this live demo I've overwritten this core function and added console.log that prints how many <tspans> were generated for a specific line: http://jsfiddle.net/kkulig/x2619jmv/ 在此实时演示中,我覆盖了此核心功能,并添加了console.log ,该console.log输出了为特定行生成的<tspans>数量: http : //jsfiddle.net/kkulig/x2619jmv/

It seems that Highcharts may run it multiple times before it finds the proper configuration of the labels. 在找到标签的正确配置之前,Highcharts可能会多次运行。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM