Question

我正在使用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]
    }]

我很感激任何帮助。

Answer 1

答案并非如此直截了当。简单来说，您需要ajax请求从服务器获取数据。

以下是详细步骤

你需要创建php，它返回json

<?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中获取数据

$(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
   }
 });

}）;

我还没有测试过代码。如果有任何语法错误，您可能需要弄明白。但希望你有点想法如何从php

Answer 2

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

其他解决方案是在javascript中注入php，如下所示：

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-database/

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

2 个答案: