Highcharts: динамически отображать цвета в сериях

Question

Проблема: я пытаюсь построить тупую диаграмму, используя высокие графики. Я хочу условно проверить, является ли серия положительной или отрицательной, и назначить цвет серии.

пробовал: написать функцию для динамического назначения цветов, но она не работает. Но та же функция используется для рендеринга кругов и работает https://jsfiddle.net/z4t2qg5o/

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    plotOptions: {
            columnrange: {
                colorByPoint: true,
                colors: ['red', 'blue', 'yellow']
            }
        },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
       
    },
    yAxis: {
        title: {
            text: ''
        },
        categories: ['Prototyping', 'Development', 'Testing'],
        reversed: true
    },
    series: [{
  
       // name: 'Project 3',
        // pointPadding: 0,
        // groupPadding: 0,
        //borderColor: 'gray',
        pointWidth: 5,
        
        data: [{
            x: 32,
            x2: 33,
            y: 0,
            val: -1,
            //color:'red'

         //   partialFill: 0.25
        }, {
        
            x: 21,
            x2:25,
            y: 1,
            val: 1,
            //color:'#BADA55'
        }, {
            x:31,
            x2: 32,
            y: 2,
            val: -1,
            //color:'red'
        }],
        dataLabels: {
        align: 'left',
            enabled: false
            
        }
    }]

}, function() {
  var chart = this,
    leftOffset = chart.plotLeft,
    topOffset = chart.plotTop,
    series = chart.series[0],
    xAxis = series.xAxis,
    x2Axis = series.x2Axis,
    yAxis = series.yAxis,
    points = series.points;
   

  points.forEach(function(point) {
    var x = xAxis.toPixels(point.x) - leftOffset,
    x2 = xAxis.toPixels(point.x2) - leftOffset,
      y = yAxis.toPixels(point.y - 0.005) - topOffset,
      
      toCenter = x2-x;
       val = point.val;

    toCenter = toCenter > 0 ? toCenter : -toCenter;
    if(val > 0 ){ 
    //to set the color of the line to green
    point.color = '#BADA55';
    chart.renderer.circle(x, y, 6).attr({
      fill: '#BADA55',
      //'stroke-width': 1,
      stroke: '#BADA55',
      zIndex: 10
    }).add(series.group);
    chart.renderer.circle(x2, y, 6).attr({
      fill: '#BADA55',
      //'stroke-width': 1,
      stroke: '#BADA55',
      zIndex: 10
    }).add(series.group);
    
    
    // toCenter = toCenter > 0 ? toCenter : -toCenter;
    chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',x2 + 74,y +35,20,20).attr({
      zIndex: 15
    }).add();
     }
    
    
    else{
    
        //to set the color of the line to green
    		point.color = '#BADA55'; 
    
        chart.renderer.circle(x, y, 6).attr({
      fill: '#ff0000',
      'stroke-width': 1,
      zIndex: 10
    }).add(series.group);
    chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',x + 92,y +35,20,20).attr({
      zIndex: 15
    }).add();
    
    // toCenter = toCenter > 0 ? toCenter : -toCenter;
    chart.renderer.circle(x2, y , 6).attr({
      fill: '#ff0000',
   //   'stroke-width': 2,
      zIndex: 10
    }).add(series.group);
    }

    
  });
});

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

Ожидается: в общей ссылке я хочу, чтобы линия была зеленой, когда значение val положительное, и линия красным, когда значение val отрицательное

Answer 1

Там может быть лучший способ достичь того, что вы хотите.вместо того, чтобы писать свою собственную функцию, используйте Zones.
Look here .
Вы можете использовать такие зоны:

series:[{
    data : [1,5,-8,9,12]//your data
    zones : [{value:0,color:'red'},{color:'green'}]
}]

Живой пример этого предоставлен HighCharts APIrefrence at this jsfiddle.
Я не знаю, считается ли это ответом на ваш вопрос, но рассмотрение этой Зоны может выиграть вам время.