代码之家 › 专栏 › 技术社区 › Ray Koren

将Json数据加载到AmChart中

amcharts json javascript

Ray Koren · 技术社区 · 6 年前

我不熟悉AmCharts,试图将变量中的json数据加载到迷你图类型的图表中,该图表正在加载,但值/行没有加载,下面是我正在做的,如何更正?非常感谢。

data = {2018-04-28 17:03:04: "9.2090000000", 2018-04-28 18:03:15: "9.1870000000", 2018-04-28 19:06:43: "9.1870000000", 2018-04-28 20:07:41: "9.1880000000", 2018-04-28 21:08:16: "9.1810000000",Â â¦}

   AmCharts.makeChart( id, {
  "type": "serial",
  "dataProvider": [data],
  "categoryField": data.key,
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 5,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [ {
    "valueField": data.value,
    "showBalloon": false,
    "lineColor": "#ffbf63",
    "negativeLineColor": "#289eaf"
  } ],
  "valueAxes": [ {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "guides": [ {
      "value": 0,
      "lineAlpha": 0.1
    } ]
  } ],
  "categoryAxis": {
    "gridAlpha": 0,
    "axisAlpha": 0,
    "startOnAxis": true
  }
} );

2 回复 | 直到 6 年前

xorspark 6 年前

如注释中所述,AmCharts需要一个对象数组。您拥有的是一个具有(外观无效)键值条目的单个对象。

您希望您的有效JSON响应如下所示:

[{
  "date": "2018-04-28 17:03:04",
  "value": 9.2090000000,
}, {
  "date": "2018-04-28 18:03:15",
  "value": 9.1870000000
},
 // etc
]

你的 valueField 和 categoryField 属性需要设置为与数据中的这些键相对应的字符串,例如。

graphs: [{
  // ...
  valueField: "value"
}],
categoryField: "date"

由于您使用的是基于日期的数据,您可能还需要考虑设置 parseDates 至true和a dataDateFormat 这样它就可以正确地解析日期和管理时段。您还需要设置 minPeriod 对应于各点之间的最小可能间隔( "hh" 持续数小时或 "mm" 在这种情况下,只需几分钟):

categoryAxis: {
  parseDates: true,
  minPeriod: "mm",
  // ...
},
dataDateFormat: "YYYY-MM-DD JJ:NN:SS",

这是一个有效的演示:

var data = [{
  "date": "2018-04-28 17:03:04",
  "value": "9.2090000000"
}, {
  "date": "2018-04-28 18:03:15",
  "value": "9.1870000000"
}, {
  "date": "2018-04-28 19:06:43",
  "value": "9.1870000000"
}, {
  "date": "2018-04-28 20:07:41",
  "value": "9.1880000000"
}, {
  "date": "2018-04-28 21:08:16",
  "value": "9.1810000000"
}, {
  "date": "2018-04-28 22:08:29",
  "value": "9.1840000000"
}, {
  "date": "2018-04-28 23:08:30",
  "value": "9.1870000000"
}, {
  "date": "2018-04-29 00:10:12",
  "value": "9.2380000000"
}, {
  "date": "2018-04-29 01:10:39",
  "value": "9.3180000000"
}, {
  "date": "2018-04-29 02:10:57",
  "value": "9.5170000000"
}, {
  "date": "2018-04-29 03:11:56",
  "value": "9.4510000000"
}, {
  "date": "2018-04-29 04:13:41",
  "value": "9.4490000000"
}, {
  "date": "2018-04-29 05:13:43",
  "value": "9.4520000000"
}, {
  "date": "2018-04-29 06:15:47",
  "value": "9.3810000000"
}, {
  "date": "2018-04-29 07:16:46",
  "value": "9.4440000000"
}, {
  "date": "2018-04-29 08:17:47",
  "value": "9.4100000000"
}, {
  "date": "2018-04-29 09:18:31",
  "value": "9.2130000000"
}, {
  "date": "2018-04-29 10:19:47",
  "value": "9.2680000000"
}, {
  "date": "2018-04-29 11:21:00",
  "value": "9.2810000000"
}, {
  "date": "2018-04-29 12:22:08",
  "value": "9.3430000000"
}, {
  "date": "2018-04-29 13:23:47",
  "value": "9.3270000000"
}, {
  "date": "2018-04-29 14:23:51",
  "value": "9.3680000000"
}, {
  "date": "2018-04-29 15:24:13",
  "value": "9.3770000000"
}, {
  "date": "2018-04-29 16:25:53",
  "value": "9.4210000000"
}];

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": data,
  "categoryField": "date",
  "autoMargins": false,
  "marginLeft": 0,
  "marginRight": 5,
  "marginTop": 0,
  "marginBottom": 0,
  "graphs": [{
    "valueField": "value",
    "showBalloon": false,
    "lineColor": "#ffbf63",
    "negativeLineColor": "#289eaf"
  }],
  "valueAxes": [{
    "gridAlpha": 0,
    "axisAlpha": 0,
    "guides": [{
      "value": 0,
      "lineAlpha": 0.1
    }]
  }],
  "dataDateFormat": "YYYY-MM-DD JJ:NN:SS",
  "categoryAxis": {
    "gridAlpha": 0,
    "parseDates": true,
    "minPeriod": "mm",
    "axisAlpha": 0,
    "startOnAxis": true
  }
});

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

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

Kavya D J 5 年前

图表数据只接受对象数组,将json移动到对象数组

am4core.useTheme(am4themes_animated);
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    for (i = 0; i < data.length ; i++) {  
        chart.data.push({ "EmployeeName": data[i].EmployeeName, "Salary": data[i].Salary});
    }

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "EmployeeName";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.minGridDistance = 30;

    categoryAxis.renderer.labels.template.adapter.add("dy", function (dy, target) {
        if (target.dataItem && target.dataItem.index & 2 == 2) {
            return dy + 25;
        }
        return dy;
    });

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "Salary";
    series.dataFields.categoryX = "EmployeeName";
    //series.name = "Visits";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 1;
    columnTemplate.strokeOpacity = 1;