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

【问题标题】：Change MySQL query based on <select> input to change Highcharts graph根据 <select> 输入更改 MySQL 查询以更改 Highcharts 图
【发布时间】：2015-04-30 21:50:40
【问题描述】：

所以我在一个站点上有 3 个引导面板，每个面板都有一个包含输入的面板标题和一个包含 Highcharts 图的面板主体。动态填充来自数据库的选项。

这就是面板的样子：

<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 循环来回显选项。每个选项都有一个特定的值（只是简单的整数）。并基于选定的选项，我想更改为 Highcharts 图拉取数据并重绘的 MySQL 查询。请注意，除非选择的选定值已更改，否则其他两个图表应保持原样。但是我该怎么做呢。

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

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

我不确定是否可以不刷新页面，但只要只有图表改变了，我想我不介意。我不确定的另一件事是我是否需要一个提交按钮来在选择一个选项后触发一切。

编辑： 好的，现在下一个问题。来自 xmlhttp 对象的响应似乎格式错误。当我打开 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...

我已经尝试并将数据的剪切部分粘贴到 javascript 中以用于 highchart 图表，它工作得很好。如果我更改选择，图表甚至会自动重绘（显然每次都是相同的数据，因为它是静态的）。因此，除非我做错了什么，否则我可能需要一种方法来删除那些 html 标签并插入结果data: [ here ]

这是我粘贴剪切后的样子，效果很好。

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

【问题讨论】：

为什么不能按照教程进行操作？我的意思是this one->“使用 JSON 的预处理数据”和this one。我认为问题在于您的数据是字符串，而应该是 JSON。 json_encode 可能会对您有所帮助，但我认为您正在将 JSON 文件创建为字符串..

标签： php mysql twitter-bootstrap highcharts xmlhttprequest

【解决方案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

【讨论】：

谢谢，这已经帮助了。我现在已经在 javascript 中设置了一个 EventListener，如果选择发生了变化，它会显示一个带有所选选项值的警报。这是我从数据库中选择数据的文件：query。该 mysql 查询文件包含在 Highcharts javascript 代码中：js。 > mysql 查询中的WHERE unit=3 基本上是需要动态的，但我不知道如何将该变量传递给mysql 查询？ XMLHTTPRequest 这件事让我感到困惑，但我会进一步研究它。
要将变量传递给 mysql，您很可能希望使用准备好的语句，因为它只是最简单的选择。 w3schools.com/php/php_mysql_prepared_statements.asp 你可以通过在 Ajax 调用中将其作为 GET 参数发送来获取 php 文件中的值，如下所示：request.send("get", "example.com/file.php?option=" + option, true)，然后将其输入带有 $_GET['option'] 的 php 文件。然后只需向绘制图表的 javascript 函数添加一个参数，并使用它来传递从 Ajax (request.responseText) 返回的任何内容。
再次感谢，我想我正在慢慢实现。是否有任何类型的调试工具来分析发送的值并在更改选择时监控一般流程。如果需要这些信息，我只会在本地工作。
你能把php文件的内容贴出来吗？
我可能发现了主要错误...那些html标签也在我的php文件中...我删除了它们但它仍然无法正常工作。也许我没有正确插入响应？ php 文件现在看起来像这样：PHP file。以下是我尝试插入响应以创建图表的方式：jsfiddle