2016-06-17 2 views
1

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.Wie ändert man die Farbe von Donut-Chart in Highchart?

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 
     }] 
    }); 
}); 



} 
+1

Hallo, Vielleicht können Sie verwenden Point.update() oder Serie .update() Methoden? http://api.highcharts.com/highcharts#Point.update Hier sehen Sie ein einfaches Beispiel, wie es funktionieren kann: http://jsfiddle.net/2Lat2fL2/ –

+0

Können Sie klarstellen, was Sie mit "ändern die Farbe von jedem Teil meines Diagramms * manuell * "? Sie können entweder die Farbinformationen zusammen mit den Seriendaten senden oder das gewünschte Farbfeld im Farbobjekt definieren oder die von @ GrzegorzBlachliński erwähnten Aktualisierungsmethoden verwenden. – jlbriggs

Antwort

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]] 
      } 
1

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 
     }      


     ] 
+0

Danke für die Antwort, aber ich kann die Datenfarbe nicht in Serie hinzufügen. Meine Daten sind oben. Ich verwende http://www.highcharts.com/demo/pie-donut dieses Diagramm. –

Verwandte Themen