Question

我有一个示例AmCharts实体仪表图，我想使用“类别”和“大小”文本框中的值进行渲染。例如，textarea将具有此JSON数据，

[
{
      "Country":"Malaysia",
      "Size":260,
      "State":"Selangor",
      "Population":450
   },
   {
      "Country":"England",
      "Size":140,
      "State":"Liverpool",
      "Population":100
   },
   {
      "Country":"China",
      "Size":250,
      "State":"Beijing",
      "Population":200
   },
   {
      "Country":"South Korea",
      "Size":360,
      "State":"Seoul",
      "Population":300
   }
]

然后我将Category设置为Country，这样它会加载4个带有4个标签的轴。

然后我将Size设置为Population，因此它加载endValue（startValue从0开始吗？）。百分比是从maxValue * 1.2得出的。

我的主要问题是，如何使用具有自定义数据配置的AmCharts渲染量表？ dataProvider在这里似乎不像在序列图中那样工作。

Codepen链接：https://codepen.io/ariff20/pen/WaKJRV

Answer 1

进一步说明我的评论-由于量表中不存在dataProvider，因此您可以重新映射数据并在配置中创建适当的属性/数组，而不必尝试在代码笔中手动设置它们。例如，您的乐队可以这样生成：

  var colors = ["#84b761", "#fdd400", "#cc4748", "#67b7dc"]; //assuming 4 bands/colors - adjust as needed
  var bands = mappedData.reduce(function(acc, d, idx) {
    acc.push({
      color: "#eee",
      startValue: 0,
      endValue: d.target,
      radius: 100 - 20 * idx + "%",
      innerRadius: 85 - 20 * idx + "%"
    });
    acc.push({
      color: colors[idx],
      startValue: 0,
      endValue: d.value,
      radius: 100 - 20 * idx + "%",
      innerRadius: 85 - 20 * idx + "%",
      balloonText: parseFloat(d.value / d.target * 100).toFixed(2)
    });
    return acc;
  }, []);

标签可以通过类似的方式生成：

  var labels = mappedData.map(function(d, idx) {
    return {
      text: d.name,
      x: "49%",
      y: 6 + 9 * idx + "%",
      size: 15,
      bold: true,
      color: colors[idx],
      align: "right"
    };
  });

生成后，只需在设置模板中填写空白，然后将其传递到makeChart调用中，首先清除之前的所有实例：

var chart; //global ref to clear the chart
function changeData() {
  // ... omitted
  var setting = {
    type: "gauge",
    theme: "light",
    axes: [
      {
        axisAlpha: 1,
        tickAlpha: 1,
        labelsEnabled: true,
        startValue: 0,
        endValue: Math.max.apply(
          Math,
          mappedData.map(function(o) {
            return o.target;
          })
        ),
        startAngle: 0,
        endAngle: 270,
        bands: bands
      }
    ],
    allLabels: labels,
    export: {
      enabled: true
    }
  };
  if (chart) {
    chart.clear();
    chart = null;
  }
  chart = AmCharts.makeChart("chartdiv", setting);
}

Demo

如何使用带有自定义数据配置的amchars创建实体计量表？

1 个答案: