[英]Highchart with Range selector for SQL Data in html website
我想在圖表中添加一個范圍選擇器，但我不知道該怎么做。 我已經嘗試了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頁23.1_values.php讀取的，然后就構建了圖表。 我在橫坐標軸上有datetime（day-hour-min-s），在縱坐標軸上有ppm值，我的值太多了，想減少dateformat並在圖表中添加范圍選擇器。
我該怎么做？
謝謝
我真的不知道我做了什么，但是現在可以了。 非常感謝您的幫助。代碼如下：
<!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>
希望對別人有幫助
Highchart日期選擇器范圍選擇器，可以動態選擇要顯示的數據
[英]Highchart datepicker range selector and can dynamically select what data to be displayed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.