amCharts에서 datatable을 사용합니다.

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

• 제 항목 용액
• 초 항목 categoryField가된다 valueField

또는 amCharts의 데이터 테이블의 데이터를 이용하여 구글이다.

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>

:

여기에 데이터와 더미 데이터의 추가 열을 사용하여 데모입니다