javascript - amCharts 不显示 json 数据

Question

我正在尝试使用 javascript 使用 amcharts 并在 php 中显示它。 我有 json-data.php，它从 mysql 数据库请求数据并发送 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>