如何更改Highchart列彩色动态地

我想设置按照平均或限值highchart柱的颜色。例如，限制值为％20，超过％20的列值将具有红色，或者低于20％的列将具有绿色。如何更改Highchart列彩色动态地

图表显示：

enter image description here

脚本：

function GetEnduktiveKapasitiveValues(type) { 

$.ajax({ 
    url: app_base_url + "Reactive/_ReaktiveDaily", 
    type: 'POST', 
    data: { branchId: 9, dateMonth: 3, type: type }, 
    success: function (result) { 
     var list = []; 
     $.each(result.DateList, function (i, val) { 
      var value = new Date(parseInt(val.substr(6))); 
      var month = value.getMonth() + 1; 
      var ret = value.getDate() + "." + month + "." + value.getFullYear(); 
      list[i] = ret; 
     }); 
     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Günlük Endüktif - Kapasitif Ceza Limiti Değerleri' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      xAxis: { 
       categories: list 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Oran (%)' 
       } 
      }, 

      tooltip: { 
       headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
       footerFormat: '</table>', 
       shared: true, 
       useHTML: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0, 
        borderRadius: 20 
       }, 
       color : ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326',  '#6AF9C4'] 
      }, 
      series: [{ 
       name: result.Name, 
       data: result.RateList, 
       type: 'column' 

      }, { 
       name: 'Ceza Limiti', 
       type: 'line', 
       data: result.Average, 
       marker: { 
        lineWidth: 2, 
        lineColor: Highcharts.getOptions().colors[3], 
        fillColor: 'white' 
       } 
      }] 
     }); 
    }, 
    error: function (result) { } 
}); 
}

我想要得到这样的结果： enter image description here

来源

2014-09-02 mustafaalkan64

做一个临时的一系列对象。
然后根据你的价值循环通过你的数据和分配data.color并将其推到一系列数据对象。
循环完成后，将temp系列对象推送到hightchart选项系列。

JSFIDDLE

实施例是一个简单的演示。你将需要适应你的需要。

来源

2014-09-02 13:30:15 Sami

您可以通过在你的数据指定的颜色做到这一点。例如从highcharts例子：

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, { 
      y: 216.4, 
      color: '#BF0B23' 
     }, 194.1, 95.6, 54.4]

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/point/color/

http://api.highcharts.com/highcharts#series.data.color

来源

2014-09-02 12:54:45 SteveP

我怎样将用于Y值为y> 216或y <216 @SteveP条件？ – mustafaalkan64 2014-09-02 13:17:44

如何更改Highchart列彩色动态地

回答

相关问题