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>