gpt4 book ai didi

javascript - Highchart 与 html 网站中 SQL 数据的范围选择器

转载 作者:行者123 更新时间:2023-12-01 05:44:36 24 4
gpt4 key购买 nike

我想在图表中添加范围选择器,但我不知道该怎么做。我尝试了 jsfiddle 的一些示例,但它不起作用。

这是我的代码:

<meta http-equiv="refresh" content="65;url=http://localhost/23-1_chart.php"/>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/XXX.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>


<div id="chart" style="height: 400px; margin: 0 auto"></div>

<script>
$(function() {
//Highcharts with mySQL and PHP - Ajax101.com

var Voc_value = [];
var time = [];
var switch1 = true;
$.get('23-1_values.php', function(data) {

data = data.split('/');
for (var i in data) {
if (switch1 == true) {
time.push(data[i]);
switch1 = false;
} else {
Voc_value.push(parseFloat(data[i]));
switch1 = true;
}

}
time.pop(); // cursor

$('#chart').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'VOC-Value-A.ROOM'
},
subtitle : {
text : 'Room A'
},
xAxis : {
title : {
text : 'time'
},
categories : time
},
yAxis : {
title : {
text : 'VOC-value in ppm'
},
labels : {
formatter : function() {
return this.value + 'VOCvalue'
}
}
},
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : 'ppm'
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{

name : 'VOC-value in ppm',
data : Voc_value
}]
});
});
});</script>

首先,我读取 SQL 值并将其放入 23-1_values.php 中。我的 sql 值正在从此 php-page 23.1_values.php 读取,然后构建图表。我在横坐标轴上有日期时间(日-小时-分钟-秒),在纵坐标轴上有 ppm 值我获得的值太多,想要减少日期格式并在图表中添加范围选择器。

我该怎么做?

谢谢

最佳答案

我真的不知道我做了什么,但它现在正在发挥作用。非常感谢您帮助我。这是代码:

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XXXXXXXXX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$.getJSON("XXX.php", function(data) {

// Create a timer
var start = + new Date();

// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},

rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '24h'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},

yAxis: {
title: {
text: 'XX'
}
},

title: {
text: 'XX'
},

subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},

series: [{
name: 'XX',
type: 'area',
data: data,
tooltip: {
valueDecimals: 1,
valueSuffix: ' ppm'
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
},
}/*,
{
name: 'Temperatur',
type: 'area',
data: datarasp,
tooltip: {
valueDecimals: 1,
valueSuffix: ' °C'
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
},
}*/]

});
});
});
</script>
</head>
<body>


<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>

希望对大家有帮助

关于javascript - Highchart 与 html 网站中 SQL 数据的范围选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28042232/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com