根据 <select> 输入更改 MySQL 查询以更改 Highcharts 图表

Question

所以我在一个站点上有 3 个 Bootstrap 面板，每个面板都有一个包含输入的 panel-header 和一个包含 Highcharts 图表的 panel-body。动态填充来自数据库的选项。

面板是这样的：

<div class="panel panel-default">
<div class="panel-heading">
    <div class="container-fluid">
        <div class="col-sm-9"><h4>Graph 1</h4></div>
        <div class="col-sm-3">
            <select class="form-control">
                <?php include('get_options_from_database.php'); ?>
            </select>
        </div>      
    </div>
</div>
<div class="panel-body">
    <div id="highcharts-graph" style="width:100%; height:auto;"></div>
</div>

get_options_from_database.php 只是使用 MySQL 查询从数据库中提取相关数据，然后使用 while 循环来回显选项。每个选项都有一个特定的值（只是简单的整数）。基于 selected 选项，我想更改 MySQL 查询，该查询为 Highcharts 图表提取数据并重绘它。请注意，除非 select 的 selected 值已更改，否则其他两个图表应保持原样。但是我该怎么做呢。

所以我（认为我）必须做的：

读取
将值写入变量并将其传递给 MySQL 查询（在单独的文件中），该查询获取图形的数据
用新数据重新绘制图表但不重新绘制其他两个

我不确定是否可以不刷新页面，但只要图表在已更改的地方更改，我想我不介意。我不确定的另一件事是我是否需要一个提交按钮，它会在 select 选择一个选项后触发所有内容。

编辑： 好的，现在是下一个问题。 xmlhttp object 的响应格式似乎有误。当我打开 Chrome 开发者工具并查看

时

getchart.php?option=1

它包含 html 个标签：

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>

        [1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19]
<!-- And a lot more data -->
</body>
</html>

但我只需要数据本身，比如：

[1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],
and so on...

我已经尝试将数据的 cut-out 粘贴到高图的 javascript 中，效果很好。如果我更改 selection，该图甚至会自动重绘（显然每次都是相同的数据，因为它是静态的）。因此，除非我做错了什么，否则我可能需要一种方法来删除那些 html 标签并插入结果 data: [ here ]

这是我粘贴 cut-out 时的样子，效果很好。

<script type="text/javascript">
    function getData(nr)
    { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                $('#graphcontainer').highcharts('StockChart', {
                    chart: {
                        type : 'spline',
                        height: 650,
                        zoomType: 'x'
                    },

                    rangeSelector : {
                        selected : 1
                    },

                    title : {
                        text : ''
                    },

                    series : [{
                        name : 'Data',
//Here is where the data goes. This is basically how 
//it must look when the response comes back but the html tags 
//make it useless (I think)
                        data :  [ [1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19],[1420084800000,22],[1420086600000,18],[1420088400000,18.7],[1420090200000,20.9],[1420092000000,21.2],[1420093800000,20.3],[1420095600000,18.3],[1420097400000,19.5],[1420099200000,22.6],[1420101000000,21.4],[1420102800000,21.6],[1420104600000,18.5],[1420106400000,20.8],[1420108200000,23],[1420110000000,23],[1420111800000,18.7],[1420113600000,20.4],[1420115400000,18.5],[1420117200000,19.6],[1420119000000,21.3],[1420120800000,18.6],[1420122600000,20.9],[1420124400000,18.5],[1420126200000,21.4],[1420128000000,20.8],[1420129800000,22.2],[1420131600000,19.4],[1420133400000,22.4],[1420135200000,19.4],[1420137000000,18],[1420138800000,20.9],[1420140600000,21.4],[1420142400000,18.9],[1420144200000,22.6],[1420146000000,19.4],[1420147800000,19.6],[1420149600000,21.5],[1420151400000,19.2],[1420153200000,21.6],[1420155000000,18.2], ] ,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]
                });
            }
        }
        xmlhttp.open("POST","getchart.php?option="+nr,true);
        xmlhttp.send();
    }
</script>

Answer 1

当用户更改选项时触发应该相当简单：

option.addEventListener('change', function(){ ... });

可以使用 XMLHTTPRequest 对象在不刷新页面的情况下重绘图表，如下所示：

var request = new XMLHTTPRequest();

request.onreadystatechange = function(){ ## do something when response comes back};
request.open("get", "example.com/getchart?option=1", true);
request.send();

一旦 XMLHTTPRequest 返回一个答案：

if(request.readystate === 4){ document.getElementById('chart').innerHTML = request.responseText };

（在 'onreadystatechange' 内沿着这些线放置一些东西）。这当然是假设它返回的响应格式为 HTML，就像您对 'get_options_from_database.php'.

所做的一样

有关 Ajax(XMLHTTPRequest) 的更多信息，您可以在此处查看：http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

根据 <select> 输入更改 MySQL 查询以更改 Highcharts 图表

Change MySQL query based on <select> input to change Highcharts graph

php

mysql

xmlhttprequest

highcharts

twitter-bootstrap