javascript - Highcharts:动态渲染颜色到系列

Question

问题:我正在尝试使用 highcharts 绘制 dumbel 图表。我想有条件地检查系列是正数还是负数，并将颜色分配给线系列。

试过:写一个函数来动态分配颜色，但它不起作用。但是相同的功能用于动态渲染圆圈并且它有效 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 而不是编写自己的函数。
看here .
您可以像这样使用区域:

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

HighCharts API 引用在 this 提供了一个活生生的例子。 jsfiddle.
我不知道这是否算作您问题的答案，但看看这个区域可能会为您争取一些时间。