2015-09-29 142 views
0

嗨,我正在研究highcharts餅圖,我用圖表顯示了傳說。我想顯示與每個切片顏色相同的圖例顏色。目前每個圖例顏色都是一樣的。 這裏是我的代碼Highcharts與餅圖切片顏色相同的圖例顏色

<script src="text/javascript"> 
     Highcharts.theme = { 
     colors: ['#058DC7', '#50B432', '#FFC000', '#ED561B', '#DDDF00', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], 
     chart: { 
      backgroundColor: { 
       linearGradient: [0, 0, 500, 500], 
       stops: [ 
        [0, 'rgb(255, 255, 255)'], 
        [1, 'rgb(240, 240, 255)'] 
       ] 
      } 
     } 
    }; 

var highchartsOptions = Highcharts.setOptions(Highcharts.theme); 

     var chart; 

     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'holdingPie', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       spacingBottom: 0, 
       margin: [0, 0, 0, 40] 
      }, 
      title: { 
       text: '' 
      }, 
      credits: { 
       enabled: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.point.name + '</b>: ' + roundNumber(this.percentage, 2) + ' %' + ' of total holding value'; 
       }, 
       style: { 
        fontSize: '11px' 
       } 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        }, 
        showInLegend: true 
       } 
      }, 
      legend: { 
       enabled: true, 
       layout: 'vertical', 
       float: true, 
       style: { 
        left: '0px', 
        bottom: 'auto', 
        right: 'auto', 
        top: '0px', 
        margin: '0px', 
        padding: '5px' 
       } 
      }, 
      series: [{ 
        type: 'pie', 
        name: 'Holdings' 
    <?php piedata(); ?> 
        }] 
      }); 
} 

piedata()是從數據庫中獲取數據的功能。 我已經搜索過它,但找不到任何相關的東西。在highchart api中有沒有任何選項可以顯示與餅圖相同顏色的圖例或其他任何方式來執行此操作。

+1

傳說應該顯示爲相同的顏色作爲默認切片及其系列圖標。你可以設置一個代表jsFiddle或顯示你的數據集的內容? – wergeld

+0

@Saif Alvi請將jsfiddle與問題綁定 –

回答

1

使用你的代碼,我創建了一個小提琴。我使用了另一個小提琴的數據,因爲你的數據不在這裏。我做出的另一個變化是,在傳說中我保持啓用:僅限真實並刪除所有樣式。你的傳奇人物即將到來,這可能是你的傳奇色彩可能無法區分的原因。

legend: { 
      enabled: true /*, 
      layout: 'vertical', 
      float: true, 
      style: { 
       left: '0px', 
       bottom: 'auto', 
       right: 'auto', 
       top: '0px', 
       margin: '0px', 
       padding: '5px' 
      }*/ 
     } 

見我the working Fiddle here