Question

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

"secretkey"

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

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

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

因此，我需要了解每个数据集的[ {CITY: A, SUM: 1500}, {CITY: B, SUM: 1470}, {CITY: C, SUM: 1920} ]广告value。

category

所以这不是很灵活。

有没有解决办法;

json对象的第一项是categoryField
第二项解决方案是valueField

或在amCharts中使用google datatable数据。

Answer 1

此功能无法立即使用，因为AmCharts需要预先定义此信息。

你当然可以通过AmCharts＆＃39;编写预处理方法或插件。 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
    }
  }
});

您可以根据需要进行扩展。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用数据表与amCharts

1 个答案: