Question

我有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);
?>

如何在函数javascript中将query.php的返回值插入到series.data中？谢谢！

Answer 1

documentation, with examples涵盖了它。看看他们的网站： - 你可能会发现更有用的想法。顺便说一句，记得发送correct 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) {...

您还可以获得live data。

最后，您可以assign the series variable in several ways，并重新绘制图表。

Answer 2

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,
                 }]
             });
         },
});

Highcharts JS使用数据库中的值

2 个答案: