javascript - 如何更改 amcharts 饼图主题?

标签 javascript jquery html pie-chart amcharts

我的 HTML 代码是这样的:

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

我的Javascript代码是这样的:

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/simple-pie-chart/

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

有什么办法可以解决我的问题吗?

最佳答案

您需要在初始化时指定theme选项,如下所示,并直接使用makeChart而不是Amcharts.AmPieChart()。您更新后的代码将是:

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

UPDATED FIDDLE

关于javascript - 如何更改 amcharts 饼图主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38280802/

相关文章:

javascript - JS如何让列表项滑动

html - 保持中间元素水平居中

html - Chrome 不尊重零宽度连接器

javascript - 在没有 Jquery 的 JavaScript 中使用 addEventListener 切换图像

Javascript:根据服务器状态禁用按钮

javascript - 如何避免 javascript 中的原型(prototype)污染?

javascript - 是否可以独立于 tickSize 控制轴号?

javascript - jQuery 元素创建中的错误?

javascript - 在 ajax-jquery 函数中传递参数遇到困难?

javascript - 突出显示选定的表格单元格 C# 菜单