问题

My HTML code is like this :

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

My Javascript code is like this :

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 and complete code is like this : https://jsfiddle.net/oscar11/4qdan7k7/2/

I want to change amchart themes like this : https://www.amcharts.com/demos/simple-pie-chart/

I add light.js library, but the themes not change

Any solution to solve my problem?

回答1:

You need to specify the theme option while initializing as below and also make use of makeChart directly instead of Amcharts.AmPieChart(). Your updated code would be:

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