如果显示10个系列，Highcharts列很薄 [英] Highcharts columns are thin when 10+ series displayed
本文介绍了如果显示10个系列，Highcharts列很薄的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了一个与
同样的行为出现当我有11或10个系列时，但是当我将系列数减少到9时（条为8，线为1），图表看起来绝对正常：
p>
但是，当我尝试使用 jsfiddle 以及相同的高级版本（5.0.8）无论我使用多少个系列，我都会得到绝对正确的行为。
$ b
Highcharts.chart（'container'，{chart：{type：'column'}，title：{text：'Monthly Average Rainfall'}，副标题：{text： 'Source：WorldClimate.com'}，xAxis：{endOnTick：false，startOnTick：false，title：{text：'xAxisLabel'}，labels：{formatter：function（）{return this.value; }}类别：[0，1，2，3，4，5，6，7，8，9，10 11， 12， 13， 14， 15， 16， 17， 18， 19， 20， 21， 22，23 ， 24， 25， 26， 27， 28， 29， 30， 31， 32， 33， 34， 35， 36， 37， 38， 39， 40， 41， 42， 43， 44， 45， 46， 47，48 ， 49， 50， 51， 52， 53， 54， 55， 56， 57， 58， 59， 60， 61，62，63，64，65，66，67，68，69]，键入：'category'}，yAxis：[{title： {text：'SOme'}，gridLineWidth：0}，{title：{text：'text2'}，opposite：true，min：0，gridLineWidth：0}]，tooltip：{headerFormat：'< span style = font-size：10px> {point.key}< / span>< table>'，pointFormat：'< tr>< td style =color：{series.co < lor}; padding：0> {series.name}：< / td>'+'< td style =padding：0>< b> {point.y：.1f} mm< b>< / td>< / tr>'，footerFormat：'< / table> ;, shared：true，useHTML：true}，plotOptions：{column：{stacking：'normal'，// turboThreshold：5000 ，grouping：false，groupPadding：0，pointPadding：0，borderWidth：0，shadow：false，stickyTracking：false，pointPlacement：'on'，marker：{enabled：false}}}，series：[{name：脑缺血，数据：[[32,1]]，颜色：＃CC6677，事件：{}}，{名称：脑缺血，数据：[[6 ，数据：[[32,1]]，[1，[10,1]]，颜色：＃332288，事件 color：＃999933，events：{}}，{name：局灶性脑缺血，data：[[16,1]]，color：＃882255 EV已废除 ：{}}，{ 名称 ： 缺血， 数据：[[8,1]]， 色彩： ＃44AA99， 事件：{}}，{ 名称： 非ST段抬高性心肌梗塞（NSTEMI），数据：[[1,1]，[10,1]]，颜色：＃DDCC77，events：{}}，{name ：未确认，数据：[[5,1]]，颜色：＃6699CC，events：{}}，{name：其他，data [2,1]，[6,1]，[69,1]]，color：＃AA4499，events：{}}，{name：ST Elevation Myocardial Infarction（STEMI） ，data：[[1,2]]，color：＃4477AA，events：{}}，{name：Stable Angina，data：[[0,3] ，[1,1]，[4,1]，[8,1]，[14,1]，[16,1]，[28,1]，[32,1]，[36,1]， color：＃88CCEE，events：{}}，{name：Unstable Angina，data：[[1,2]，[2,2]，[5,1]， [11,1]，[12,1]， 色彩： ＃117733， 事件：{}}，{ 名称： 科目， 数据：[[0124]，[1124 ]，[2122]，[3122]，[4121]，[5121]，[6120]，[7118]，[8117]，[9116]，[10115]，[11114]，[12111]，[13110]， [14108]，[15106]，[16103]，[17102]，[18102]，[19100]，[20,98]，[21,98]，[22,97]，[23,96]，[24 ，96]，[25,96]，[26,95]，[27,95]，[28,95]，[29,93]，[30,93]，[31,93]，[32,92 ]，[33,91]，[34,90]，[35,89]，[36,87]，[37,86]，[38,85]， [39,84]，[40,82]，[41,81]，[42,80]，[43,80]，[44,80]，[45,80]，[46,79]，[47 ，77]，[48,77]，[49,77]，[50,77]，[51,77]，[52,75]，[53,73]，[54,73]，[55,71 ]，[56,69]，[57,69]，[58,68]，[59,67]，[60,67]，[61,67]，[62,67]，[63,67]， [64,67]，[65,67]，[66,67]，[67,66]，[68,66]，[69,66]， 颜色： ＃000000， 类型： 线， Y轴：1， dashStyle： ShortDot， 标记物：{ 启用：假} 的lineWidth：1， pointPlacement：NULL， stickyTracking：假}]} ）;
< script src =https：// code.highcharts.com/5.0.8/highcharts.js\"></script><script src =https://code.highcharts.com/5.0.8/modules/exporting.js><< ; / script>< script src =https://code.highcharts.com/modules/boost.js>< / script>< div id =containerstyle =min-width：310px; height：400px; margin：0 auto>< / div>
解决方案
它是由boost模块引起的，更具体的是由 boost.seriesThreshold 属性引起的。 ， https://code.highcharts.com/modules/boost.src.js seriesThreshold 属性在默认情况下被设置为10（现在是50），所以它与版本无关， 。
示例：
http： //jsfiddle.net/p6afwkb3/
I faced an issue very similar to this one, but with categorized axis. The problem is that if I add too many series on the plot (more than 10 series) the columns become too thin and almost invisible even though there is enough place for them. Here is how the chart looks like when I have 12 series(11 for bars + 1 for line): The same behaviour appears when I have 11 or 10 series, but when I reduce number of series to 9 (8 for bars + 1 for line) the chart looks absolutely normal:
However when I try recreating this bug with jsfiddle and the same highcharts version (5.0.8) I get absolutely correct behavior no matter how many series I use.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
endOnTick: false,
startOnTick: false,
title: {
text: 'xAxisLabel'
},
labels: {
formatter: function () {
return this.value;
}
},
categories: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69"],
type: 'category'
},
yAxis: [ {
title: {
text: 'SOme'
},
gridLineWidth: 0
},
{
title: {
text: 'text2'
},
opposite: true,
min: 0,
gridLineWidth: 0
}],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
stacking: 'normal',
//turboThreshold: 5000,
grouping: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
shadow: false,
stickyTracking: false,
pointPlacement: 'on',
marker: {
enabled: false
}
}
},
series:[{"name":"Brain Ischemia","data":[[32,1]],"color":"#CC6677","events":{}},{"name":"Cerebral Ischemia","data":[[6,1],[10,1]],"color":"#332288","events":{}},{"name":"Cerebrovascular Ischemia","data":[[32,1]],"color":"#999933","events":{}},{"name":"Focal Brain Ischemia","data":[[16,1]],"color":"#882255","events":{}},{"name":"Ischemia","data":[[8,1]],"color":"#44AA99","events":{}},{"name":"Non-ST Elevation Myocardial Infarction (NSTEMI)","data":[[1,1],[10,1]],"color":"#DDCC77","events":{}},{"name":"Not Confirmed","data":[[5,1]],"color":"#6699CC","events":{}},{"name":"Other","data":[[2,1],[6,1],[69,1]],"color":"#AA4499","events":{}},{"name":"ST Elevation Myocardial Infarction (STEMI)","data":[[1,2]],"color":"#4477AA","events":{}},{"name":"Stable Angina","data":[[0,3],[1,1],[4,1],[8,1],[14,1],[16,1],[28,1],[32,1],[36,1]],"color":"#88CCEE","events":{}},{"name":"Unstable Angina","data":[[1,2],[2,2],[5,1],[11,1],[12,1]],"color":"#117733","events":{}},{"name":"SUBJECTS","data":[[0,124],[1,124],[2,122],[3,122],[4,121],[5,121],[6,120],[7,118],[8,117],[9,116],[10,115],[11,114],[12,111],[13,110],[14,108],[15,106],[16,103],[17,102],[18,102],[19,100],[20,98],[21,98],[22,97],[23,96],[24,96],[25,96],[26,95],[27,95],[28,95],[29,93],[30,93],[31,93],[32,92],[33,91],[34,90],[35,89],[36,87],[37,86],[38,85],[39,84],[40,82],[41,81],[42,80],[43,80],[44,80],[45,80],[46,79],[47,77],[48,77],[49,77],[50,77],[51,77],[52,75],[53,73],[54,73],[55,71],[56,69],[57,69],[58,68],[59,67],[60,67],[61,67],[62,67],[63,67],[64,67],[65,67],[66,67],[67,66],[68,66],[69,66]],"color":"#000000","type":"line","yAxis":1,"dashStyle":"ShortDot","marker":{"enabled":false},"lineWidth":1,"pointPlacement":null,"stickyTracking":false}]
});
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
<script src="https://code.highcharts.com/5.0.8/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
解决方案
It is caused by boost module, more specifically by boost.seriesThreshold property. It tells when the boost should kick in globally (see the source, https://code.highcharts.com/modules/boost.src.js). So, it has nothing to do with the version, simply before (until v5.0.12) seriesThreshold property was set to 10 by default (now it is 50).
Example:
http://jsfiddle.net/p6afwkb3/
这篇关于如果显示10个系列，Highcharts列很薄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
