将 Json 数据加载到 AmChart

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

如 cmets 中所述，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

chart.data 仅接受对象数组，将 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;