MSSQL Server to PHP Array to JSON Encode to Highcharts

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}] 

伟大。有数据。

我已经尝试了每个教程，每个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 窗口只是空白的。未呈现图表。

Answer 1

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

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