MSSQL Server 到 PHP 数组到 JSON 编码到 Highcharts答案

【问题标题】：MSSQL Server to PHP Array to JSON Encode to HighchartsMSSQL Server 到 PHP 数组到 JSON 编码到 Highcharts
【发布时间】：2020-01-25 18:26:37
【问题描述】：

我有非常简单的数据，这些数据来自我的 MSSQL Server 到 JSON_Encode。

这是我的 PHP 代码（位于 myPHPFile.php）：

<?php
$serverName = "MyServer";
$connectionInfo = array( "Database"=>"MyDatabase", "UID"=>"MyUID", "PWD"=>"MyPWD");
$conn = sqlsrv_connect( $serverName, $connectionInfo);


$tsql = "SELECT * FROM [MyDatabase].[dbo].[MyView] ORDER BY Year";  

$stmt = sqlsrv_query( $conn, $tsql); 

$rows = array();
while($r = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
    $res[] = $r;
}

print json_encode($res, JSON_NUMERIC_CHECK);

sqlsrv_free_stmt( $stmt);  
sqlsrv_close( $conn);  
?>

这给了我以下打印：

[{"Year":2016,"Number":41},{"Year":2017,"Number":512},{"Year":2018,"Number":1895},{"Year":2019,"Number":3132}]

太好了。有数据。

我已经尝试了每个教程、每个 highcharts 论坛帖子和每个 stackoverflow 问题，以便从我的 php 文件中以 JSON 格式获取这些简单数据，并将其转换为 Highcharts 图表。也许我遗漏了一些明显的东西。

让我们看看我的 HTML 文件：

在头脑中：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        $.getJSON("myPHPFile.php", function(json) {

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line',
                },
                xAxis: {
                    title: { text: 'Year'}
                },
                yAxis: {
                    title: {
                        text: 'Number'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                series: json
            });
        });

    });

});
        </script>

然后显然是我的 div

<div id="container"></div>

我错过了什么？ HTML 窗口是空白的。未呈现图表。

【问题讨论】：

在function(json) 下添加console.log 时是否记录了正确的信息？

标签： javascript php json sql-server highcharts

【解决方案1】：

Highchart examples 显示了另一个设置图表的示例。可以使用以下格式：

$(document).ready(function() {
  $.getJSON("myPHPFile.php", function(json) {
    var series = json.map(function(record){
        return [record.Year, record.Number];
    })

    Highcharts.chart('container', {
      chart: {
        renderTo: 'container',
        type: 'line',
      },
      xAxis: {
        title: {
          text: 'Year'
        }
      },
      yAxis: {
        title: {
          text: 'Number'
        },
      },
      series: [{
        data: series
      }],
    });

  });
});

查看下面的现场演示：

const data = [{
  "Year": 2016,
  "Number": 41
}, {
  "Year": 2017,
  "Number": 512
}, {
  "Year": 2018,
  "Number": 1895
}, {
  "Year": 2019,
  "Number": 3132
}];

const series = data.map(record => [record.Year, record.Number])

Highcharts.chart('container', {
  chart: {
    renderTo: 'container',
    type: 'line',
  },
  xAxis: {
    title: {
      text: 'Year'
    }
  },
  yAxis: {
    title: {
      text: 'Number'
    },
  },
  series: [{
    data: series
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

【讨论】：