Wie ändert man die Farbe von Donut-Chart in Highchart?

Question

Ich benutze Donut-Chart von Highchart. Ich möchte die Farbe jedes Teils meines Diagramms manuell ändern. Angenommen, ich möchte aus meinem Code Eigenkapital: rot, Schuld: blau, Large Cap: grün, Multi Cap: braun und so weiter. Wie kann ich das machen? Bitte teilen Sie mit mir, wenn jemand eine Idee hat. Ich verweise von this chart.

sind meine Codes unter

hinzugefügt

function print_chart(equity_data,debt_data, equity_percent , debt_percent) 
{ 

    $(function() { 
    var donut_data_param; 
    var colors = ['#483D8B','#458B00']; 

    donut_data_param = [{ 
      y: equity_percent, 
      color: colors[0], 
      drilldown: { 
       name: 'Equity', 
       categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'], 
       data: equity_data, 
       color: colors[0] 
      } 
     }, { 
      y: debt_percent, 
      color: colors[1], 
      drilldown: { 
       name: 'Debt', 
       categories: ['Liquid', 'Ultra short' ,'short','Debt Hybrid','FD'], 
       data: debt_data, 
       color: colors[1] 
      } 
     }]; 



     var categories = ['Equity','Debt'], 

     data = donut_data_param, 

     browserData = [], 
     versionsData = [], 
     i, 
     j, 
     dataLen = data.length, 
     drillDataLen, 
     brightness; 


    // Build the data arrays 
    for (i = 0; i < dataLen; i += 1) { 

     // add browser data 
     browserData.push({ 
      name: categories[i], 
      y: data[i].y, 
      color: data[i].color 
     }); 

     // add version data 
     drillDataLen = data[i].drilldown.data.length; 
     for (j = 0; j < drillDataLen; j += 1) { 
      brightness = 0.2 - (j/drillDataLen)/5; 
      versionsData.push({ 
       name: data[i].drilldown.categories[j], 
       y: data[i].drilldown.data[j], 
       color: Highcharts.Color(data[i].color).brighten(brightness).get() 
      }); 
     } 
    } 

    // Create the chart 
    $('#mychart').highcharts({ 
     chart: { 
      type: 'pie', 
      marginBottom: -40, 
      marginTop: -10 
     }, 
     legend: { 
      layout: 'vertical', 
      floating: true, 
      align: 'left', 
      verticalAlign: 'top', 
      symbolPadding: 20, 
      symbolWidth: 10, 
      y: 100 
     }, credits: { 
       enabled: false 
     }, 
     exporting: { enabled: false }, 
     title: { 
      text: '' 
     }, 

     // subtitle: { 
     //  text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' 
     // }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      pie: { 
       shadow: false, 
       center: ['50%', '50%'] 
      } 
     }, 
     tooltip: { 
      valueSuffix: '%' 
     }, 
     series: [{ 
      name: 'Percentage', 
      data: browserData, 
      size: '60%', 
      dataLabels: { 
       formatter: function() { 
        return this.y > 5 ? this.point.name : null; 
       }, 
       color: '#ffffff', 
       distance: -30 
      } 
     }, { 
      name: 'Percentage', 
      data: versionsData, 
      size: '80%', 
      innerSize: '60%', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: false 
     }] 
    }); 
}); 



} 

Answer 1

die Lösung. http://jsfiddle.net/faywp9w3/

dies geändert: - color: data[i].drilldown.colors[j]

// add version data 
     drillDataLen = data[i].drilldown.data.length; 
     for (j = 0; j < drillDataLen; j += 1) { 
      brightness = 0.2 - (j/drillDataLen)/5; 
      versionsData.push({ 
       name: data[i].drilldown.categories[j], 
       y: data[i].drilldown.data[j], 
       color: data[i].drilldown.colors[j] 
      }); 
     } 

erklärt: var colors = ['#0000ff','#458B00','#658300'];

Und hinzufügen: colors: [colors[2],colors[1],colors[2],colors[1]] in Drill-Down

drilldown: { 
       name: 'Equity', 
       categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'], 
       data: equity_data, 
       colors: [colors[2],colors[1],colors[2],colors[1]] 
      } 

Answer 2

jsfiddle

series: [{ 
     type: 'pie', 
     name: 'Browser share', 
     innerSize: '50%', 
     data: [{ 
      name: 'one', 
      y: 40, 
      color: 'yellow' // Jane's color 
     }, 
     { 
      name: 'two', 
      y: 50, 
      color: 'green' // Jane's color 
     }, 
     { 
      name: 'three', 
      y: 10, 
      color: 'red' // Jane's color 
     }      


     ]