Question

我正在使用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>

Answer 1

我解决了这个问题。需要推送plotLines值：

options.xAxis.plotLines.push

使用HighCharts中的选项的多个plotLines

1 个答案: