amCharts 未显示 json 数据

Question

我正在尝试通过 javascript 使用 amcharts 并将其显示在 php 中。我有 jSON-data.php 从 mysql db 请求数据并发送 json 看起来像：

[
{"item":"Clinical Items","qty":"9200"},
{"item":"Stationary","qty":"10026"},
{"item":"Cleaning","qty":"28400"}
]

但不显示图表。图表部分为空。下面是我的js代码。

AmCharts.makeChart("chartdiv", {
  type: "serial",
  dataLoader: {
    url: "jSON-data.php",
    format: "json"
  },
  categoryField: "item",
  rotate: false,

  categoryAxis: {
    gridPosition: "start",
    axisColor: "#2471A3 "
  },
  valueAxes: [
    {
      axisAlpha: 0.2
    }
  ],
  graphs: [
    {
      type: "column",
      title: "Prouduct Usage:",
      valueField: "qty",
      lineAlpha: 0,
      fillColors: "#2471A3",
      fillAlphas: 0.8,
      balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
    }
  ],
  valueAxes: [
    {
      axisAlpha: 0,
      position: "left",
      title: "Product Usage Quantity"
    }
  ],
  export: {
    enabled: true
  }
});

显示图表时有什么阻碍。请帮我解决这个问题。提前谢谢你。

Answer 1

您的图表应该适用于当前的设置和数据格式。正如 xospark 提到的，您可能缺少图表维度，如下所示：

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

如果不是这种情况，则问题出在 dataLoader 设置或端点本身。

我建议您检查端点返回的内容，并将 showErrors: true 添加到您的数据加载器。

请检查下面没有端点的示例。

AmCharts.makeChart("chartdiv", {
  type: "serial",
  dataProvider: [
{"item":"Clinical Items","qty":"9200"},
{"item":"Stationary","qty":"10026"},
{"item":"Cleaning","qty":"28400"}
],
  categoryField: "item",
  rotate: false,

  categoryAxis: {
    gridPosition: "start",
    axisColor: "#2471A3 "
  },
  valueAxes: [
    {
      axisAlpha: 0.2
    }
  ],
  graphs: [
    {
      type: "column",
      title: "Prouduct Usage:",
      valueField: "qty",
      lineAlpha: 0,
      fillColors: "#2471A3",
      fillAlphas: 0.8,
      balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
    }
  ],
  valueAxes: [
    {
      axisAlpha: 0,
      position: "left",
      title: "Product Usage Quantity"
    }
  ],
  export: {
    enabled: true
  }
});

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

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv"></div>

amCharts 未显示 json 数据

amCharts not displaying json data

javascript

php

json

amcharts