个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
因此，我在一个站点上有 3 个 Bootstrap 面板，每个面板都有一个包含输入的面板标题和一个包含 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 查询。请注意，其他两个图表应保持原样，除非选择的选定值已更改。但我到底该如何做到这一点。
所以我(认为我)必须做的:
我不确定是否可以不刷新页面，但只要图表在已更改的地方发生变化，我想我不介意。我不确定的另一件事是我是否需要一个提交按钮，该按钮会在选择选项后触发所有内容。
编辑:好的，现在下一个问题。 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...
我已经尝试过，只是将数据的剪裁粘贴到 Highchart 图形的 JavaScript 中，效果很好。如果我更改选择，图表甚至会自动重新绘制(显然每次都是相同的数据，因为它是静态的)。因此，除非我做错了什么，否则我可能需要一种方法来删除这些 html 标签并插入结果 data: [ here ]
这就是我粘贴 Papercut 后的样子，效果很好。
<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>
最佳答案
当用户更改选项时触发应该相当简单:
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
关于php - 根据 <select> 输入更改 MySQL 查询以更改 Highcharts 图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29978446/
24
4
0
在 的 React 组件中菜单，我需要设置selected反射(reflect)应用程序状态的选项的属性。 在 render() , optionState从状态所有者传递给 SortMenu 组件
我是初级 Ruby-mysql 程序员，我想知道如何使我的(存储过程)查询结果更快.. 这是我的存储过程我正在使用 SQL_CACHE.. 但我不确定.. 缓存使我的过程更快.. : ( DROP
我一直在 Python 中进行套接字编程，以使用 select.select(rfile, wfile, xlist[, timeout]) 处理由已连接的客户端套接字列表发出的请求，并且我还想用 J
我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选
我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。 我有几个选择框。所选值
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
预选 的最佳做法是什么？在 ？ 根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案 如果您正在编写 XHTML，则 selected="selected" 是必需的。 如
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
我在 jqGrid 中有几列 edittype="select"。如何读取特定行中当前选定值的选项值？ 例如:当我提供以下选项时，如何获得 FedEx 等的“FE” editoption: { val
这是我更大问题的精简查询，但要点是我试图内部联接到一个选择，其中选择受到外部选择的限制。那可能吗？我在内部选择上收到有关多部分标识符 S.Item 和 S.SerialNum 的错误。 要点是这样的，
如果chat.chat_type IS NULL，我想选择user.*，但如果chat.chat_type = 1 我想选择组。* SELECT CASE WHEN ch
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用
你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就
我是一名优秀的程序员,十分优秀！