Highcharts JS的值从数据库

Highcharts JS with values from database

本文关键字：数据库 JS Highcharts      更新时间：2023-09-26

Highchart列的代码如下:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            min: 0,
        },
...
        series: [{
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Istanbul', 14.2],
                ['Karachi', 14.0],
            ],
        }]
    });
});
这个文件query。php:

<?php
include 'bd_cnx.php';
  $sql = "SELECT
            ...";
  $result = $conn->query($sql);
  if ($result->num_rows > 0){
  while($row = $result->fetch_assoc()){
    $ret[] =[$row['NUME_J'], floatval($row['TOTAL'])];
        }
  }
    echo json_encode($ret);
?>

我怎么能插入返回值从query.php在函数javascript系列数据?谢谢你！

var data ;
$.ajax({
    method:"POST",
    url:"query.php",
    data:{},
    success:
         function(response){
             data=response;
             $('#container').highcharts({
                  chart: {
                     type: 'column'
                 },
                 xAxis: {
                     type: 'category',
                 },
                 yAxis: {
                     min: 0,
                 },
         ...
                 series: [{
                     data: data,
                 }]
             });
         },
});

在文档中有示例。看看他们的网站——你可能会发现更多有用的想法。顺便说一句，记得发送正确的JSON Content-Type，否则一些浏览器可能会阻止。

这是一种方式:

$(function () {
    // Get the CSV and create the chart
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {...

您还可以获得实时数据。

最后，您可以通过几种方式分配series变量，并重新绘制图表。

相关文章：