如何更改 amcharts 馅饼主题? [英] How to change amcharts pie themes?

问题描述

我的 HTML 代码是这样的:

My HTML code is like this :

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

我的 Javascript 代码是这样的:

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

演示和完整代码如下:https://jsfiddle.net/oscar11/4qdan7k7/2/

我想像这样更改 amchart 主题:https://www.amcharts.com/demos/简单饼图/

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

我添加了 light.js 库，但主题没有改变

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

有什么解决方案可以解决我的问题?

Any solution to solve my problem?

推荐答案

初始化时需要指定theme选项，也可以直接使用makeChart代替Amcharts.AmPieChart().您更新后的代码将是:

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

更新的小提琴

这篇关于如何更改 amcharts 馅饼主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！