如何更改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列彩色動態地

回答

相關問題