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

问题描述

我的HTML代码如下所示：

 < div id =chartdivstyle =width：100％; height：362px;>< / div> 
  

我的Javascript代码如下所示：

  var chart; 
 var legend; 
 
 var chartData = [
 {
country：捷克共和国，
liters：301.9 
}，
 { 
国家：爱尔兰，
升：201.1 
}，
 {
国家：德国，
升：165.8 
}，
 {
国家：澳大利亚，
升：139.9 
}，
 {
 国家：奥地利，
升：128.3 
}，
 {
国家：英国，
升：99 
}，
 {
国家：比利时，
升：60 
} 
]; 
 console.log（chartData）; 
 AmCharts.ready（function（）{
 // PIE CHART 
 chart = new AmCharts.AmPieChart（）; 
 chart.dataProvider = chartData; 
 chart.titleField =country; 
 chart.valueField =liters; 
 
 //写入
 chart.write（chartdiv）; 
}）; 
  

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

我想改变amchart这样的主题： https://www.amcharts.com/demos/simple-pie -chart /

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

任何解决方案来解决我的问题？

解决方案

您需要指定主题选项，同时也可以直接使用 makeChart 而不是 Amcharts.AmPieChart（）。您的更新代码将为：

  AmCharts.makeChart（chartdiv，{
type：pie ，
theme：light，
dataProvider：chartData，
valueField：liters，
titleField：country，
出口：{
启用：true 
} 
}）; 
  

UPDATED FIDDLE

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?

解决方案

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

UPDATED FIDDLE

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