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 properyを知っておく必要があります。

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

これはあまり柔軟ではありません。

取得する解決策はありますか。

• JSONオブジェクトの最初の項目がcategoryFieldされる溶液の
• 2番目の項目はvalueField

またはamChartsにおけるデータテーブルのデータをGoogleの使用です。

Answer 1

AmChartsはこの情報を事前に定義する必要があるため、この機能は使用できません。

AmChartsのaddInitHandlerメソッドを使用して、前処理メソッドまたはプラグインを作成して、データを変換してグラフを作成できます。

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

あなたが同じくらいあなたが必要としてこれを拡張することができます。ここでは、カスタムプラグインを動作させるために必要な設定を含むカスタムdataTableプロパティを定義する基本的な例です。

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>

：

はここにあなたのデータとダミーデータの追加の列を使用したデモです