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

Question

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

这和Highchart.js

我有一个仅显示图表的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请求来从服务器获取数据。

这是详细步骤

1. 您需要创建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 ?> 

2. 更新您的脚本以从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获取json有所了解

Answer 2

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

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

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