Javascript 为数据库驱动的图表（highchart.js）使用JSON获取图表的值

我正在使用Codepen中的库创建一个简单的数据库驱动图，这些库包括：

及

我有一个简单显示图表的HTML文件，主要数据和处理通过index.js文件完成，该文件包含绘制图表的静态值。该文件是：

$(function () {
var options = {

    chart: {
        renderTo: 'container'
    },

    subtitle: {
        text: 'Subtitle'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      tickInterval: 4
    },

/***  The following Values are needed to be fetched from DB which are now static */ 

    series: [{
        data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

},
chart = new Highcharts.Chart(options);

$('#redraw').click(function() {
    console.log(chart.xAxis[0]);
    chart.redraw();
});
});

现在我想创建一个PHP文件，它将从数据库中获取数据并将其发送到JS文件

 $test=mysql_query("select id from tbl_graph");
 $rowtest=mysql_fetch_array($test);

现在我想要的是，需要将从数据库获取的数据发送到Index.js文件，以便Index.js中的以下静态值可以直接从数据库连接

 series: [{
        data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

---

非常感谢您的帮助。

在PHP脚本中，您需要准备数组，并通过json_encode（）函数转换为json。然后，您只需要在javascript中使用$.getJSON（），并在highcharts中使用数据

另一个解决方案是在javascript中注入php，如下所示：

---

答案并不那么直截了当。简单地说，您需要ajax请求从服务器获取数据

以下是详细的步骤

您需要创建返回json的php

<?php
$return_arr = array();
$fetch = mysql_query("SELECT * FROM tbl_graph"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array[] = $row['value'];
   array_push($return_arr,$row_array);
}

echo json_encode($return_arr); // This will return [4,5,6,7] in json

?>

}))

---

我还没有测试代码。可能您需要弄清楚是否有语法错误。但希望您了解如何从php获取json，您需要ajax来调用服务器。谢谢你的帮助，但我面临的问题是，我只需要将这些值转换成Javascript，而不想像你提到的链接那样用HTML显示它们：请参考那边的行：$（'#output'）.HTML（“id:+id+”name:+vname）//设置输出元素htmlYes，这样在ajax成功函数中，您可以构建一个图表，其中序列类似于序列：[{data:data}]嗨，代码没有显示任何内容，所以我单独测试了PHP文件的输出，得到的输出为：[[“1”]、[“1”、“2”]、[“1”、“2”、“3”]、[“1”、“2”、“3”、“4”]、[“1”、“2”、“3”、“4”]、[“1”，“2”，“3”，“4”，“7”，“8”]，[“1”，“2”，“3”，“4”，“7”，“8”，“5”]，[“1”，“2”，“3”，“4”，“7”，“8”，“5”，“6”]]我对这方面不是很精通，如果你能帮我一点忙，我将不胜感激。现在，这些数据被提供给mu JS文件，我看不到任何输出图！事实上，我理解了你的逻辑，甚至我的脑海里也有同样的想法，但你给了我一个大局，所以谢谢。但我仍然没有得到我想要的准确输出，所以我只需要一个指导。谢谢您需要了解highchart系列接受的是一个值数组。所以当我说json_encode（$result）时，它显示类似于[1,3,5,6,4,5]的内容。这是该系列的输入，如果需要多个系列，则可能需要更改javascript。

$(function () {
var options = {

chart: {
    renderTo: 'container'
},

subtitle: {
    text: 'Subtitle'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  tickInterval: 4
},

/***  The following Values are needed to be fetched from DB which are now static */ 

series: [{
    data: [89.9, 21.5, 16.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

},
chart = new Highcharts.Chart(options);

$('#redraw').click(function() {
 // whenever you click redraw, it will grab json from php file above    
 $.getJSON('http://yourpath.com/test.php', function (csv) {
     chart.series[0].setData(csv,true);//then set data and return csv
   }
 });