amCharts动态数据传递

时间:2015-09-23 06:08:19

标签: javascript amcharts

我正在尝试动态地将数据传递到amCharts,但数据未在图表中显示。代码块在下面,这是一个简单的代码:

<script>

var chartData = generateChartData();

var chart = AmCharts.makeChart("testDiv", {
    "type": "serial",
    "theme": "light",
    dataSets: [{
        fieldMappings: [{
            fromField: "country",
            toField: "country"
        }, {
            fromField: "visits",
            toField: "visits"
        }],

    "dataProvider": chartData,
    "valueAxes": [{
        "gridColor": "#FFFFFF",
        "gridAlpha": 0.2,
        "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0,
        "tickPosition": "start",
        "tickLength": 20
    },
    "export": {
        "enabled": true
    }

});



function generateChartData() {

for (var i = 0; i < 3 ; i++) {
    var chartData = [];
    /*
    var a = versionList[i];
    var b = countOfVersion[i];
    */
    chartData.push({
        country: "Canb",
        visits:1
    });
}
return chartData;
}
</script>

<div id="testDiv"></div>

如何将数据传递到图表中?我有一个名为generateChartData的方法,此方法生成将在图表中使用的数据。

1 个答案:

答案 0 :(得分:1)

此图表不显示任何内容的原因是您在for循环的每次迭代中重置chartData数组:

var chartData = [];

这导致数据只有一个数据点。由于您的折线图没有任何项目符号,因此您什么都看不到。 (没有线来描绘自己的单一数据点)

尝试修改此功能:

function generateChartData() {
  var chartData = [];
  for ( var i = 0; i < 3; i++ ) {
    /*
    var a = versionList[i];
    var b = countOfVersion[i];
    */
    chartData.push( {
      country: "Canb",
      visits: 1
    } );
  }
  return chartData;
}

在相关说明中,您拥有的dataSets块仅用于股票图表,在序列图表中将被忽略。您可以简单地删除整个块,因为它不会以任何方式影响图表。