2015-09-29 143 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