将数据表与 amCharts 一起使用

Question

我正在将 google 图表迁移到 amCharts。我正在使用这样的数据数组：

[ 
  [CITY, SUM],
  [A,    1500],
  [B,    1470],
  [C,    1920]
]

我可以在 google 图表中使用它。所以这个解决方案非常灵活和动态。而且我没有像 amCharts 这样的类别字段设置任何值字段。

但我看到 amCharts 数据应该是 json 对象数组。

[ 
  {CITY: A,   SUM: 1500},
  {CITY: B,   SUM: 1470},
  {CITY: C,   SUM: 1920}
]

所以我需要知道每个数据集的 value 和 category 属性。

var chart = AmCharts.makeChart("chartdiv", {
  "categoryField": "CITY",
  "graphs": [{
    "type": "column",
    "valueField": "SUM"
  }]
}

所以这不是很灵活。

有没有解决办法得到;

json 对象的第一项是类别字段
第二项解决方案是valueField

或者在amCharts中使用google数据表数据。

Answer 1

由于 AmCharts 需要预先定义此信息，因此此功能不是开箱即用的。

您当然可以通过AmCharts的addInitHandler方法编写预处理方法或插件来转换您的数据并为您创建图表。这是一个定义自定义 dataTable 属性的基本示例，其中包含使自定义插件工作所需的设置：

//mini plugin to handle google datatable array of arrays format
AmCharts.addInitHandler(function(chart) {
  if (!chart.dataTable && !chart.dataTable.data && !chart.dataTable.graph) {
    return;
  }  
  var dataProvider;
  var graphs = [];
  var graphTemplate = chart.dataTable.graph;
  var fields = chart.dataTable.data[0];
  var data = chart.dataTable.data.slice(1);

  fields.slice(1).forEach(function(valueField) {
    graphs.push({
      type: graphTemplate.type || "line",
      fillAlphas: graphTemplate.fillAlphas || 0,
      lineAlpha: graphTemplate.lineAlpha || 1,
      valueField: valueField
    });
  });

  dataProvider = data.map(function(arr) {
    var dataObj = {};
    arr.forEach(function(value, idx) {
      dataObj[fields[idx]] = value;
    })
    return dataObj;
  });

  chart.categoryField = fields[0];
  chart.graphs = graphs;
  chart.dataProvider = dataProvider; 
});

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light", 
  //custom dataTable property used by the chart to accept dataTable format
  "dataTable": {  
    "data": dataTable,
    "graph": { //graph template for all value fields
      "type": "column",
      "fillAlphas": .8,
      "lineAlpha": 1
    }
  }
});

您可以根据需要扩展它。

这是一个使用您的数据和一列额外的虚拟数据的演示：

var dataTable = [
  ["CITY", "SUM", "AVG"],
  ["A", 1500, 500],
  ["B", 1470, 490],
  ["C", 1920, 640]
];

//mini plugin to handle google datatable array of arrays format
AmCharts.addInitHandler(function(chart) {
  //check if the required properties for the plugin are defined before proceeding
  if (!chart.dataTable && !chart.dataTable.data && !chart.dataTable.graph) {
    return;
  }
  var dataProvider;
  var graphs = [];
  var graphTemplate = chart.dataTable.graph;
  var fields = chart.dataTable.data[0];
  var data = chart.dataTable.data.slice(1);

  //create the graph objects using the graph template from the custom dataTable property
  fields.slice(1).forEach(function(valueField) {
    graphs.push({
      type: graphTemplate.type || "line",
      fillAlphas: graphTemplate.fillAlphas || 0,
      lineAlpha: graphTemplate.lineAlpha || 1,
      valueField: valueField
    });
  });

  //construct the dataProvider array from the datatable data
  dataProvider = data.map(function(arr) {
    var dataObj = {};
    arr.forEach(function(value, idx) {
      dataObj[fields[idx]] = value;
    })
    return dataObj;
  });

  //update the chart properties
  chart.categoryField = fields[0];
  chart.graphs = graphs;
  chart.dataProvider = dataProvider;
});

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  //custom dataTable property used by the chart to accept dataTable format
  "dataTable": {
    "data": dataTable,
    "graph": { //graph template for all value fields
      "type": "column",
      "fillAlphas": .8,
      "lineAlpha": 1
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

将数据表与 amCharts 一起使用

using datatable with amCharts

javascript

amcharts