时间戳

首页 > 解决方案 > Apexcharts 不显示来自 Web 服务的数据

mysql - Apexcharts 不显示来自 Web 服务的数据

问题描述

我正在尝试将 Apexcharts 集成到我用核心 PHP 编码的 Web 应用程序中，而不使用任何框架。

在这里，我想从 Web 服务中检索图表的数据。

我也在使用 JQuery。

这是HTML代码：

<div id="bar-chart" class="apex-charts" data-colors="#6658dd"></div>

这是JS代码：

var options = {
  chart: {
      height: 350,
      type: 'bar',
  },
  dataLabels: {
      enabled: false
  },
  series: [],
  title: {
      text: 'Date wise Consumption',
  },
  noData: {
    text: 'Loading...'
  }
}
var chart = new ApexCharts(document.querySelector("#bar-chart"), options);
chart.render();
$.getJSON(url, function(response) {
    chart.updateSeries([{
    name: 'Stock Usage',
    data: response
  }])
});

Web 服务的代码非常简单。如下：

<?php
include 'conn.php';
$sql = mysqli_query($con,"SELECT `sl_date`, `sl_qty` FROM `stock_levels` ORDER BY `sl_date`");
$response = array();

while($row = mysqli_fetch_array($sql) )
{
   $response[] = array("date"=>$row['sl_date'],"value"=>$row['sl_qty']);
}
echo json_encode($response);
?>

我在这里犯了什么错误。

标签： mysqlapexcharts

解决方案

请注意，Apexcharts 接受轴图的 [name, data] 对象数组或 [x, y] 配对数据或非轴（饼图/甜甜圈）图的值数组。（https://apexcharts.com/docs/options/series/）。它不接受 JSON 输入，因此您必须将 JSON 转换为数组。

推荐阅读