我有一个叠加的柱子高压图表,有正负叠加和水平滚动条。我试图根据最大数据和最小数据使yAxis具有最小值和最大值,所以我在highstock的json中设置了这些值(在计算它们之后)。
但是,xAxis上的用户名称的长度会覆盖这些最大值,是否可以解决这个问题?
这是我的小提琴:http://jsfiddle.net/fj6d2/3931/
由于代码太大而无法在此处发布,因此这里是没有所有数据的配置:
Highcharts.chart('container', {
"chart":{
"type":"column"
},
"title":{
"text":""
},
"xAxis":{
"min":0,
"max":31,
"categories":[
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxx",
"Xxx Xxxxx",
],
"labels":{
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
},
"scrollbar":{
"enabled":true,
"barBackgroundColor":"gray",
"barBorderRadius":7,
"barBorderWidth":0,
"buttonBackgroundColor":"gray",
"buttonBorderWidth":0,
"buttonArrowColor":"yellow",
"buttonBorderRadius":7,
"rifleColor":"yellow",
"trackBackgroundColor":"white",
"trackBorderWidth":1,
"trackBorderColor":"silver",
"trackBorderRadius":7
},
"yAxis":{
"title":{
"text":"Time (hh:mm)"
},
"tickInterval":600,
"labels":{
},
"gridLineWidth":0,
"plotLines":[
{
"value":0,
"width":1,
"color":"#000",
"zIndex":4
}
],
"tickmarkPlacement":"on",
"max":45336,
"min":-21443
},
"plotOptions":{
"column":{
"stacking":"normal",
"events":{
}
}
},
"credits":{
"enabled":false
},
"tooltip":{
"shared":true,
"crosshairs":true
},
"legend":{
"align":"right",
"verticalAlign":"top",
"itemStyle":{
"display":"none"
},
"title":{
"text":"Click a colour"
}
},
"series":[
{
"name":"On Task Teacher Recommended",
"data":[
487,
13512,
10064,
2664,
],
"color":"#86E067",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"On Task Student Discovered",
"data":[
1276,
5495,
1307,
3369,
],
"color":"#5CB5E5",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Uncategorised",
"data":[
944,
12202,
2920,
4643,
],
"color":"#F98157",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
},
{
"name":"Off Task",
"data":[
-126,
-686,
-1998,
-927,
],
"color":"#E3454D",
"events":{
},
"point":{
"events":false
},
"customEvents":{
"series":{
},
"point":{
}
}
}
]
});
答案 0 :(得分:2)
您可以使用函数
截断高位图的长名称(xAxis)function truncString(str, max, add){
add = add || '...';
return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};
并在formatter
"labels":{
"formatter": function() {
return truncString(this.value,8,'...')
},
"style":{
"font-size":"12px"
},
"useHTML":true,
"events":{
}
}
Fiddle demo