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'}]
}]

this jsfiddle的HighCharts API引用提供了一个生动的例子。
我不知道这是否可以回答您的问题，但是看一下“区域”中的东西可能会为您带来一些时间。

高图：动态呈现颜色到系列

1 个答案: