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数据

1 个答案: