2016-07-09 4 views
0

Mein ist HTML-Code wie folgt aus:Wie ändert man Amcharts Kuchen Themen?

<div id="chartdiv" style="width: 100%; height: 362px;"></div> 

Mein Javascript-Code ist wie folgt:

var chart; 
var legend; 

var chartData = [ 
    { 
    "country": "Czech Republic", 
    "litres": 301.9 
    }, 
    { 
    "country": "Ireland", 
    "litres": 201.1 
    }, 
    { 
    "country": "Germany", 
    "litres": 165.8 
    }, 
    { 
    "country": "Australia", 
    "litres": 139.9 
    }, 
    { 
    "country": "Austria", 
    "litres": 128.3 
    }, 
    { 
    "country": "UK", 
    "litres": 99 
    }, 
    { 
    "country": "Belgium", 
    "litres": 60 
    } 
]; 
console.log(chartData); 
AmCharts.ready(function() { 
    // PIE CHART 
    chart = new AmCharts.AmPieChart(); 
    chart.dataProvider = chartData; 
    chart.titleField = "country"; 
    chart.valueField = "litres"; 

    // WRITE 
    chart.write("chartdiv"); 
}); 

Demo und vollständige Code ist dies wie: https://jsfiddle.net/oscar11/4qdan7k7/2/

ich amchart Themen ändern möchten wie dies: https://www.amcharts.com/demos/simple-pie-chart/

Ich füge light.js Bibliothek, aber die Themen nicht ändern

Jede Lösung, um mein Problem zu lösen?

Antwort

1

Sie müssen die Option theme bei der Initialisierung wie folgt angeben und auch makeChart direkt anstelle von Amcharts.AmPieChart() verwenden. Ihre aktualisierte Code wäre:

AmCharts.makeChart("chartdiv", { 
    "type": "pie", 
    "theme": "light", 
    "dataProvider": chartData, 
    "valueField": "litres", 
    "titleField": "country", 
    "export": { 
    "enabled": true 
    } 
}); 

UPDATED FIDDLE

+1

Danke. Es funktioniert –

+0

Ich möchte noch einmal fragen. Wie fügt man einen Titel hinzu? Ich möchte es als "My Chart" hinzufügen –

+2

@mosestoh - überprüfen Sie diesen Teil der AmCharts api: https://docs.amcharts.com/3/jacascriptcharts/Title Hier ist ein aktualisiertes Beispiel mit einem Diagrammtitel: https://jsfiddle.net/dc939gzq/2/ – mg1075