Highcharts XAXIS多种颜色

Question

我创建以下Highcharts图表：

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); 

我需要第二X轴的颜色设置为一个以上的颜色。 我的第二个xAxis是动态更新的。 如何决定不同颜色的线条的不同值？ 我需要动态更新这些值。

Answer 1

你的这个example

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