Highcharts xAxis多种颜色

Question

I am creating the following Highcharts chart:

var chart = {
        type: 'scatter',
        zoomType: 'xy',
        backgroundColor: 171515,
    events: {
        selection:function(event){
                var myChart = $('#chartContainer').highcharts();
                if(event.xAxis || event.yAxis){
                    xAxisBool = true;
                    $('#chartContainer').highcharts().xAxis[1].update({
                        visible: false
                    });
                } 
                else{
                    xAxisBool = false;
                    $('#chartContainer').highcharts().xAxis[1].update({
                        visible: true
                    });
                }
            }
        }
    };

var  title = {
    text: '<span style="color: #a85757">discovery</span>'
};

var subtitle = {
    text: '<span style="color: #a85757">Source: VR-Forces</span>'
};

var xAxis = [{
    title: {
        enabled: true,
        text: '<span style="color: #a85757">Heading (Deg)</span>'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true,
    tickPositions: [-180,-160,-140,-120,-100,-80,-60,-40,-20,0,20,40,60,80,100,120,140,160,180],
    lineColor: '#a85757',
    tickColor: '#FF0000',
    tickWidth: 3,
    labels: {
        style: {
            color: 'white'
        }
    }
},{
    title: {
        enabled: false
    },
    valueDecimals: 1,
    startOnTick: true,
    endOnTick: true,
    ceiling: 360,
    /*lineColor: '#a85757',*/
    tickColor: '#FF0000',
    tickWidth: 3,
    labels: {
        style: {
            color: 'white'
        }
    },
    colors: {
        minColor: '#0b933f',
        maxColor: '#cc1c0f'
    }
}];

var yAxis = {
    title: {
        enabled: true,
        text: '<span style="color: #a85757">Frequency [GHz]</span>'
    },
    allowDecimals: true,
    valueDecimals: 4,
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true,
    ceiling: 20.0000,
    min: 0.0000,
    max: 20.0000,
    tickAmount: 15,
    labels: {
        style: {
            color: 'white'
        }
    }
};

var borderColor = '#696969';

var legend = {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 800,
    y: -8,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#a6a6a6',
    borderWidth: 1
};

var plotOptions = {
    scatter: {
        marker: {
            radius: 5,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.id}, {point.x} Deg, {point.y} GHz',
            valueDecimals: 3
        },
        showInLegend: true
    },
    series: {
        cursor: 'pointer',
        events: {
            click: function (e) {
                var id = e.point.id;
                chartSelect(id);
            }
        }
    }
};

var credits = {
    enabled: false        
};

var series = [{
    name: 'firstSeries',
    color: '#ffffff',
    data: [],
    valueDecimals: 4,
    marker: {
        symbol: 'url(./icons/GreenSquare.png)'
    }
    },{
    name: 'secondSeries',
    color: '#ffffff',
    data: [],
    valueDecimals: 4,
    marker: {
        symbol: 'url(./icons/BlueSquare.png)'
    }
}, {
    name: 'thirdSeries',
    color: '#ffffff',
    data: [],
    valueDecimals: 4,
    marker: {
        symbol: 'url(./icons/PurpleSquare.png)'
    }
}];



var chartJson = {};
chartJson.chart = chart;
chartJson.title = title;
chartJson.subtitle = subtitle;
chartJson.xAxis = xAxis;
chartJson.yAxis = yAxis;
chartJson.borderColor = borderColor;
chartJson.legend = legend;
chartJson.plotOptions = plotOptions;
chartJson.credits = credits;
chartJson.series = series;

$('#chartContainer').highcharts(chartJson);

I need to set the second xAxis colors to more then one color. My second xAxis is dynamically updated. How can I decide on different colors for different values of the line? I need to update those values dynamically.

Answer 1

Thy this example

var chart = $('#container').highcharts();
chart.xAxis[0].update(xAxis);