爲高圖中的每列設置不同的顏色

我需要爲highCharts圖中的每列設置不同的顏色。我highCharts GRPH是：爲高圖中的每列設置不同的顏色

options = { 

     chart: { 

      renderTo: 'chart', 

      type: 'column', 

      width: 450 

     }, 

     title: { 

      text: 'A glance overview at your contest’s status' 

     }, 

     xAxis: { 

      categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'], 
      labels: { 
       //rotation: -45, 
       style: { 
        font: 'normal 9px Verdana, sans-serif, arial' 
       } 
      } 
     }, 

     yAxis: { 

      allowDecimals: false, 
      min: 0, 
      title: { 

       text: 'Amount' 
      } 
     }, 

     legend: { 
      enabled: false 
     }, 

     series: [] 
    }; 

    series = { 
     name: "Amount", 
     data: [], 
     dataLabels: { 
      enabled: true, 
      color: '#000000', 
      align: 'right', 
      x: -10, 
      y: 20, 
      formatter: function() { 
       return this.y; 
      }, 
      style: { 
       font: 'normal 13px Verdana, sans-serif' 
      } 
     } 
    };

我就定在這樣的數據：

  for (var i in Data) { 

     if (parseInt(Data[i]) != 0) { 

      series.data.push(parseInt(Data[i])); 
     } 
     else { 
      series.data.push(null); 
     } 
    } 

    options.series.push(series); 

    chart = new Highcharts.Chart(options);

我怎麼能在這個循環中的每個數據設置不同的顏色？

來源

2011-10-12 user750487

如果將值添加到您還可以使用設置顏色的series.data點選項，例如

series.data.push({ y: parseInt(Data[i]), color: '#FF0000' });

爲更多細節的點選項看到http://www.highcharts.com/ref/#point--color

來源

2011-10-12 11:04:02 escouser

嗨！這又是我......我如何通過數據設置列寬。例如：如果數據是23我想設置列寬100px，如果數據是123，它將是110px。我需要將這個選項用於列中間的推杆數據。 – user750487

對不起，我不確定你會如何在高層圖上做到這一點。 – escouser

你可以通過plotOptions-> series-> linewidth來設置寬度。但是，這將固定圖表中所有條的寬度。也許你可以使用最大值來設置它。 http://www.highcharts.com/ref/#plotOptions-series--lineWidth –

這裏是另一種解決方案最新版本的Highcharts（目前3.0）。

將colorByPoint選項設置爲true並定義您想要的color sequence。

options = { 
    chart: {...}, 
    plotOptions: { 
     column: { 
      colorByPoint: true 
     } 
    }, 
    colors: [ 
     '#ff0000', 
     '#00ff00', 
     '#0000ff' 
    ] 
}

這裏是基於Highcharts一個example Column with rotated labels demo

來源

2013-04-23 12:31:58

請注意，此解決方案適用於條形圖和列。只需在plotOptions數組中將'column'更改爲'bar' – Rooster

正是我所需要的，並比接受的答案更容易實現。謝謝！ – keithxm23

嘗試這些方法的執行：

方法1：

Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] });

方法2：

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000']; 

$('#bar_chart').highcharts({ 
     chart: { 
      type: 'column'    
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      title: { 
       text: '' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: false      
       } 
      } 
     },   

     series: [{ 
      name: '', 
      colorByPoint: true, 
      data: [{ 
       name: 'Blue', 
       y: 5.78, 
       color: colors[0] 

      }, { 
       name: 'Green', 
       y: 5.19, 
       color: colors[1] 

      }, { 
       name: 'Pink', 
       y: 32.11, 
       color: colors[2] 

      }, { 
       name: 'Yellow', 
       y: 10.04, 
       color: colors[3] 

      }, { 
       name: 'Purple', 
       y: 19.33, 
       color: colors[4] 

      }] 
     }] 
    });

來源

2017-10-27 12:43:42

爲高圖中的每列設置不同的顏色

回答

相關問題