时间戳

首页 > 解决方案 > 如何在 Highcharts 上制作 3 种不同的颜色

highcharts - 如何在 Highcharts 上制作 3 种不同的颜色

问题描述

我在我的项目中使用 highcharts，现在我只能制作 2 种不同的颜色。当值 >= 0 时为蓝色，为负数时为红色。

图表

有没有办法把它变成3种颜色？因此，当值 = 0 时，颜色变为绿色，我尝试使用那里有人演示的“linkedTo”，但我的数据 [] 是动态的。

$(function () {
      $('#jugernaut<?php echo $a; ?>').highcharts({
            chart: {
                  type: 'column',
                   spacing:[0,0,0,0],
      height: 450
            },
            title: {
                  text: '<?php echo $key->carline.' '.$key->conveyeor ?>',
                  style: {
                            fontSize: '18px',
                            fontFamily: 'Verdana, sans-serif'
                  }
            },
    yAxis: 
    {     visible: false,
      tickLength:1, 
           title: {
           text: ''
             },
      labels: {
    style: {
      fontSize: '17px',
      fontWeight: 'bold'
    },
    plotLines: [{
        color: '#C0C0C0',
        width: 5,
        value: 0
    }]

  },
     },
    xAxis:{
     tickInterval:1,
     labels: {
    style: {
      fontSize: '17px',
       fontWeight: 'bold'
    },
  }
   },
        credits: {
                text: '',
    enable:false,
     
          },
  plotOptions:{

    marker:{
      enabled: false
    }
  },
  series: [
  {
    name: ' ',
    type: 'spline',
    data: <?php echo json_encode(${"jamnya".$i});?>,
    color: '#1122DD',
    threshold: 0,
    negativeColor: 'red',
  }
  ]
    });
});

*对不起，如果我的英语这么差

标签： highcharts

解决方案

对的，这是可能的。例如，您可以使用zones功能来定义三个级别的值的颜色。这是示例代码：

series: [{
        data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
        zones: [{
            value: 0,
            color: 'red'
        }, {
            value: 0.000001,
            color: 'green'
        }, {
            color: 'blue'
        }]
}]

此外，您可以通过color: 'green'直接向该0点添加属性来实现这一点，就像这样：

series: [{
    data: [-10, -5, {y:0, color: 'green'}, 5, 10, 15, 10, 10, 5, {y:0, color: 'green'}, -5],
    zones: [{
        value: 0,
        color: 'red'
    }, {
        color: 'blue'
    }]
}]

以下是示例：

http://jsfiddle.net/ggxmo9n1/

http://jsfiddle.net/0s8oukLv/

API参考：

https://api.highcharts.com/highcharts/plotOptions.line.zones

推荐阅读