从JSON生成饼图时的自定义颜色

时间:2018-11-09 15:17:56

标签: amcharts

我正在尝试使用Am4Charts和createFromConfig方法创建具有一组自定义颜色的饼图。

我已按照教程here进行操作,但图表始终以其默认颜色设置显示。

这是我尝试过的JSON示例:

"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
  "0": {
    "pot": "Within 8 days",
    "value": "£111,119.70",
  },
  "1": {
    "pot": "9 - 17 days",
    "value": "£225,537.73"
  },
"2": {
    "pot": "18+ days",
    "value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
    "type": "CategoryAxis",
    "title": {
    "text": "pot"
    },
    "dataFields": {
    "category": "pot",
    "title": {
        "text": "Month"
    }
    },
    "renderer": {
    "labels": {
        "rotation": 190,
        "verticalCenter": "middle",
        "horizontalCenter": "left"
    }
    }
}
],

"series": [
{
    "type": "PieSeries",
    "dataFields": {
    "value": "value",
    "category": "pot"
    },
    "ticks": {
    "disabled": true
    },
    "labels": {
    "disabled": true
    },

}
],

有人可以看到我哪里出问题了吗?

1 个答案:

答案 0 :(得分:1)

更新2:

  

已在4.0.0-beta.85中修复。

     

确保升级后清除浏览器缓存。如果您仍然遇到此问题,请随时与我们联系。

更新1:

来自amchart贡献者/首席技术官Martynas Majeris(https://github.com/martynasma)的回复:

  

看起来有两个问题:文档错误,并且有一个错误使其无法工作:)

     

我更新了文档。应该这样说:

     
{
    // ...
    "series": [{
        // ...
        "colors": {
            "list": [
                "#845EC2",
                "#D65DB1",
                "#FF6F91",
                "#FF9671",
                "#FFC75F",
                "#F9F871"
            ]
        }
    }]    
}

     

此外,还修复了开发版本中的错误。新版本将在1-2天内发布。

原始

这可能是一个错误,我在amchart github上打开了一个问题。收到回复后,我将对此进行更新:https://github.com/amcharts/amcharts4/issues/577

顺便说一句,我确实认为您的配置JSON有几个问题:

  • data是一个数组,而不是对象
  • legend是一个对象,而不是数组

这是我用来为已解决的问题创建饼图演示的方法:

// Create chart instance in one go
let chart = am4core.createFromConfig({
    "colors": {
        "list": ["#ff0000","#00ff00", "#0000ff"]
    },
    // Create pie series
    "series": [{
        "colors": ["#ff0000","#00ff00", "#0000ff"],
        "type": "PieSeries",
        "dataFields": {
            "value": "value",
            "category": "pot"
        }
    }],
    // Add data
    "data": [{
        "pot": "Within 8 days",
        "value": "£111,119.70"
    }, {
        "pot": "9 - 17 days",
        "value": "£225,537.73"
    }, {
        "pot": "18+ days",
        "value": "£720,279.85"
    }],
    // Add legend
    "legend": {},
    "innerRadius": 100
}, "chart", am4charts.PieChart);