我正在使用highcharts进行可视化。我试图绘制similar种类的图表。我尝试使用多个y轴，最后以
结束
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
yAxis: 0,
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
yAxis: 1,
type: 'column',
name: 'Boston',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 1,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 1,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 1,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
答案 0 :(得分：0)
好吧，解决方案是将id和colour添加到每个系列项目中（您也可以定义全局颜色）：
id: "series0",
color: "red",
然后，对于第二个轴系列项，您需要添加linkedTo: <id>个参数。看看它是如何工作的（颜色仅指定为0和第4个元素，只是为了表明它有效）：
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
id: "series0",
color: "red",
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series1",
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
id: "series2",
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
id: "series3",
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
id: "series4",
linkedTo: "series0",
color: "red",
yAxis: 1,
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series5",
linkedTo: "series1",
yAxis: 1,
type: 'column',
data: [1000, 6000, 3000, 2000]
}, {
id: "series6",
linkedTo: "series2",
yAxis: 1,
type: 'column',
data: [3000, 7000, 2000, 8000]
}, {
id: "series7",
linkedTo: "series3",
yAxis: 1,
type: 'column',
data: [6000, 2000, 3000, 4000]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>