Question

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

Answer 1

正如评论中所提到的，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和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>

Answer 2

图表。数据仅接受对象数组，将json移至对象数组

date ('yyyy-MM-dd', strtotime ($terca));

将Json数据加载到AmChart中

2 个答案: