如何显示包含多个系列的条形图：
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"
}
}
);
});
在这个例子中，我想一个接一个地显示：
然后让A组为蓝色，B组为红色，并在图表下方显示一个图例： - A组（蓝色） - B组（红色）
我对如何用高级图表做这件事感到困惑......
修改
感谢Rotan075了解我的问题并找到解决方案。 http://jsfiddle.net/hw5s4ahm/
实际上我没有指定需要为该系列保留相同的数据结构：
"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
}]
其余部分可以更改，但此数据由第三部分级别生成，并且必须保持通用。我认为这只是设置问题，但似乎要复杂得多。
答案 0 :(得分：1)
我从你的代码中理解的是，你有A组和B组的数据吗？你要做的是制作两个相同长度的数据列表。如果没有特定组的数据，则必须为其添加null值。否则，Highcharts会为每个Test x组合A组和B组。
您需要的是this code (live on 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"
}
}
);
});
P.S。为了对齐图表底部的图例，我以一种非常黑客的方式做到了这一点。我使用标题文本只是空格并将图例放在它上面。您可以随意修改它。
答案 1 :(得分：0)
您要求的大部分内容应由highcharts的默认行为处理。
- 您可以为系列选项中的每个系列指定颜色：
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)
}]
- 您可以通过类别选项设置x轴标签：
xAxis: {
categories: ['Test 01','Test 02','Test 03','Test 04','Test 05','Test 06','Test 07']
}
- 图表会默认对它们进行分组
- 默认情况下，图例将在图表下方对齐（无需黑客攻击）
行动中的例子：
使用您的数据更新了示例：
向x轴添加最小值和最大值以始终显示每个类别