MSSQL Server to PHP Array to JSON Encode to

Question

我有非常简单的数据，这些数据从我的MSSQL服务器到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}] 伟大。这是数据。我已经尝试了每个教程，每个高图表论坛帖子和每个堆栈溢出问题，以从我的JSON格式的php文件中获取这些简单的数据，并将其转换为高图表。也许我错过了一些明显的东西。让我们来看看我的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 窗口只是空白。不呈现图表。

Answer 1

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

$(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>