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

Question

我有一个 Highcharts 饼图，并且正在使用径向渐变。

演示: http://jsfiddle.net/19vyugeL/1/

问题:将特定渐变颜色应用于特定饼图切片。对于普通颜色，我在数据上使用 color: ，但我不知道如何使用渐变来做到这一点。

目标:我希望“剩余”预算切片为当前颜色，所有“已用”预算切片为其他颜色(绿色)。

  $(function () {

       // Create the chart
       $('#container9').highcharts({
           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]
               ]
           }],
           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}<br/> {point.y}%<br/>${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: RemainingColor1,

               }, {
                   name: "Wave 2",
                   y: 23,
                   // color: SpentColor1,
                   spend: '97,693'
               }, {
                   name: "Wave 3",
                   y: 3,
                   // color: SpentColor1,
                   spend: '5,364',


               }]
           }]

       });
   });

Answer 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}<br/> {point.y}%<br/>${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/