Highchart，具有多个系列的条形图
[英]Highchart, bar chart with multiple series
问题描述
How can I display a bar chart with multiple series: 
如何显示多个系列的条形图：
http://jsfiddle.net/qyd6w5tx/1/ http://jsfiddle.net/qyd6w5tx/1/
$(function () {
$('#container').highcharts(
{
"chart": {
"style": {
"fontFamily": "Arial, sans-serif"
},
"alignTicks": false,
"marginRight": 20,
"height": 334
},
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">●</span> <span style=\"{series.options.style.pct}\">({point.percentage:,.2f}%)</span> <b style=\"{series.options.style.abs}\">{point.value:,.2f}</b><br/>"
},
"xAxis": {
"type": "category",
"reversed": false,
"labels": {}
},
"yAxis": [{
"title": {
"text": null
},
"index": 0
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"index": 1,
"min": -0.39,
"max": 9.99
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"opposite": true,
"index": 2
}],
"legend": {
"borderWidth": 0,
"enabled": false
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
"style": {
"textShadow": "none"
},
"allowOverlap": true
},
"minPointLength": 2
},
},
"credits": {
"enabled": false
},
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}],
"title": {
"text": "Test"
}
}
);
});
In this example I would like to display one after the other: 在此示例中，我要一个接一个显示：
- Test 01 测试01
- Test 02 测试02
- Test 03 测试03
- Test 04 测试04
- Test 05 测试05
- Test 06 测试06
- Test 07 测试07
And then have the Group A in blue and the Group B in red, and display a legend under the chart with: - Group A (in blue) - Group B (in red) 然后将A组显示为蓝色，将B组显示为红色，并在图表下显示以下图例：-A组（蓝色）-B组（红色）
I am bit confused with how to make this with highchart... 我对如何用highchart制作这个表感到困惑...
Edit: 编辑：
Thanks to Rotan075 to understand my problem and to find a solution. 感谢Rotan075理解我的问题并找到解决方案。 http://jsfiddle.net/hw5s4ahm/ http://jsfiddle.net/hw5s4ahm/
Actually I didn't specify that need to keep the same data structure for the series: 实际上，我没有指定需要为该系列保留相同的数据结构：
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}]
The rest can change, but this data is generated by a third part level and has to stay generic. 其余的可以更改，但是此数据由第三方生成，并且必须保持通用。 I thought it would be just a question of settings but it seem to be much more complicated. 我以为这只是设置的问题，但似乎要复杂得多。
2 个解决方案
解决方案1
1 2015-08-25 12:55:12
For what I understood out of your code is that you have data for Group A and group B right? 从您的代码中我了解到的是，您拥有A组和B组的数据，对吗？ What you have to do is make two data list with each of the same length. 您要做的是制作两个长度相同的数据列表。 If there is no data for the specific group you have to add a null value to it. 如果没有特定组的数据，则必须为其添加一个null值。 Otherwise Highcharts combines the group A and group B for every Test x. 否则，Highcharts将针对每个测试x组合A组和B组。
What you need is this code (live on JSFiddle) : 您需要的是这段代码（在JSFiddle上运行） ：
$(function () {
$('#container').highcharts(
{
chart: {
type: 'column',
inverted: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {
if(this.y > 0){
return this.y;
return this.point.y;
}
}
}
}
},
yAxis: {
allowDecimals: false,
min: -1,
labels: {
formatter: function () {
return this.value + '%';
}
},
title: {
text: ' ',
margin:40
}
},
xAxis: {
categories: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5','Test6','Test7']
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'middle',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1,
y:10,
x:350
},
series: [{
name: 'GroupA',
color: 'rgba(223, 83, 83, .5)',
data: [{y:null},{y:null}, {y:null}, {y:null}, {y:2.9}, {y:0.5}, {y:1.5}]
},{
name: 'GroupB',
color: 'rgba(119, 152, 191, .5)',
data: [{y:6.5}, {y:3.9}, {y:8.5}, {y:6.6},{y:null},{y:null},{y:null}]
}],
title: {
text: "Test"
}
}
);
});
PS For aligning the Legend on the bottom of your graph I did that in a quite hackish way. 附注：为了使图例底部的图例对齐，我以一种非常怪异的方式做到了这一点。 I use as title text just blank space and place the legend above it. 我仅将空白用作标题文本，并在其上方放置图例。 You can modify it in whatever you want. 您可以根据需要进行修改。
解决方案2
0 2015-08-25 14:34:36
Most of what you are asking for should be handled by the default behavior of highcharts. 您要求的大多数内容应由highcharts的默认行为处理。
-You can specify the color for each series within the series options: -您可以在系列选项中为每个系列指定颜色：
series: [{
name: 'Group A',
color: 'rgba(0,156,255,0.9)',
data: [...]
},{
name: 'Group B',
color: 'rgba(204,0,0,0.9)',
data: randomData(7)
}]
-You can set your x axis labels via the categories option: -您可以通过类别选项设置x轴标签：
xAxis: {
categories: ['Test 01','Test 02','Test 03','Test 04','Test 05','Test 06','Test 07']
}
-The chart will group them by default -默认情况下，图表会将它们分组
-The legend will be aligned below the chart by default (no hacks required) -默认情况下，图例将在图表下方对齐（无需黑客攻击）
Example in action: 实际示例：
Updated example using your data: 使用数据更新了示例：
Adds a min and max value to the x axis to always show each category 向x轴添加一个最小值和最大值以始终显示每个类别
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.