我正在使用highcharts在同一页面上构建三个图表,并希望在它们上显示多个plotLines。我当前的代码只渲染最后一个plotLine值(如果我删除括号,则为第一个值)。例如:
options.xAxis.plotLines[0] = ({value: 17.53, color: '#444', width: 1, dashStyle: 'solid'}, {value: 29.52, color: '#444', width: 1, dashStyle: 'solid'});
任何帮助都会很棒。
完整代码(已移除数据)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
chart: {
backgroundColor: null
}
});
var options = {
chart: {
type: 'areaspline'
},
title: {
text: 'Route'
},
plotOptions: {
areaspline:
{
lineColor: null,
fillColor: 'green',
lineWidth:0,
marker: {
enabled: false
}
}
},
credits: { enabled: false },
yAxis: {
min: 0,
tickPixelInterval: 30,
gridLineColor:null,
lineColor:'#333',
title:{text:null},
labels:{enabled:true},
legend:{enabled:false },
title: {
text: null
}
},
xAxis: {
plotLines: []
},
series: [{
showInLegend: false
},
]
};
options.chart.renderTo = ‘Chart1’;
options.title.text = 'Chart1';
options.series[0].data = [[0.05,75]… // Data ];
options.plotOptions.areaspline.fillColor = '#0066CC';
options.xAxis.plotLines[0] = ({value: 15.44, color: '#444', width: 1, dashStyle: 'solid'}, {value: 18.23, color: '#444', width: 1, dashStyle: 'solid'});
var chart1 = new Highcharts.Chart(options);
options.chart.renderTo = 'Chart2’;
options.title.text = 'Chart2’;
options.series[0].data = [[0.05,75]… // Data ];
options.plotOptions.areaspline.fillColor = '#FF0033';
options.xAxis.plotLines[0] = ({value: 17.53, color: '#444', width: 1, dashStyle: 'solid'}, {value: 29.52, color: '#444', width: 1, dashStyle: 'solid'});
var chart2 = new Highcharts.Chart(options);
options.chart.renderTo = 'Chart3’;
options.title.text = 'Chart3’;
options.series[0].data = [[0.05,79]… // Data ];
options.plotOptions.areaspline.fillColor = '#48BC26';
var chart3 = new Highcharts.Chart(options);
})
</script>
<script src="js/highcharts.js"></script>
<body>
<div id="Chart1" style="min-width: 310px; height: 140px; margin: 0 auto"></div>
<div id="Chart2” style="min-width: 310px; height: 140px; margin: 0 auto"></div>
<div id="Chart3” style="min-width: 310px; height: 140px; margin: 0 auto"></div>
</body>
</html>
答案 0 :(得分:0)
我解决了这个问题。需要推送plotLines值:
options.xAxis.plotLines.push