Highcharts饼图指定饼切片渐变颜色

1 回答

• 1

  定义数组颜色，然后在分配颜色时可以访问它：

  $(function () {
  
         colors = [{
                 radialGradient: {
                     cx: 0.5,
                     cy: 0.3,
                     r: 0.7
                 },
                 stops: [
                     [0, RemainingColor1],
                     [1, RemainingColor2]
                 ]
             }, {
                 radialGradient: {
                     cx: 0.5,
                     cy: 0.3,
                     r: 0.7
                 },
                 stops: [
                     [0, SpentColor1],
                     [1, SpentColor2]
                 ]
             }];
  
         // Create the chart
         $('#container9').highcharts({
             chart: {
                 type: 'pie',
                 marginTop: 50,
                 marginBottom: 5,
             },
             title: {
                 text: 'Total Budget - $440,000'
             },
             subtitle: {
                 text: 'Total Spent - $103,057'
             },
             plotOptions: {
                 series: {
                     borderWidth: 2
                 },
                 pie: {
                     allowPointSelect: true,
                     borderWidth: 3,
                     borderColor: 'black',
                     dataLabels: {
                         style: {
                             fontSize: 9,
                         },
  
                         distance: -1,
                         y: -10,
                         x: 10,
                         color: TextColor,
                         enabled: true,
                         inside: true,
                         verticalAlign: 'top',
                         format: '{point.name}
   {point.y}%
  ${point.spend}'
                     }
                 },
             },
  
             tooltip: {
                 headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                 pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% -  ${point.spend} of Total'
             },
             series: [{
                 name: new Date().getFullYear() + " National Spend ",
  
                 data: [{
                     name: new Date().getFullYear() + " Remaining Budget",
                     y: 79,
                     spend: '336,943',
                     color: colors[0],
  
                 }, {
                     name: "Wave 2",
                     y: 23,
                     color: colors[1],
                     spend: '97,693'
                 }, {
                     name: "Wave 3",
                     y: 3,
                     color: colors[1],
                     spend: '5,364',
  
  
                 }]
             }]
  
         });
     });
  

  http://jsfiddle.net/19vyugeL/3/

  回复于 2018-12-15T09:19:19+00:00