以下の各シリーズの最小値と最大値を決定できるようにしたいと考えています (シリーズはpH、ORP、Tank、HeaterおよびRoom)。Tank、同じスケールで表示されるため、すべて同じ最小変数と最大変数に書き込む必要がHeaterありRoomます (つまり、3 つのデータ セットのいずれかの最小値または最大値を表示します。サンプル データの最小値は 22.20 で、最大値は 24.33 です)。下）
インポートされる生データは次の形式です (はるかに多くの列があります)。
完全なサンプルについては、http://macca.myreef.info/24hr_final.csvを参照してください。
サンプル：
pnt_1 1375935000.00 1375935300.00 1375935600.00 1375935900.00
pH 8.34 8.35 8.36 8.36
ORP 415.24 415.44 415.05 414.74
Tank 24.27 24.26 24.20 24.22
Heater 24.33 24.30 24.30 24.30
Room 22.20 22.32 22.44 22.52
ごみpnt_1、列1は「ヘッダー」、行1はepoch残りのデータは値です（そのエポック時間で）。
まだあなたを失っていないことを願っています。
以下のコードを使用して、ハイチャートをほぼ希望どおりに表示することができました – http://macca.myreef.info/test1.htmlを参照してください
できるようになりたい
- 各行の最小値と最大値を変数として宣言します (
tank、HeaterおよびRoom行を 1 として扱います)。 - 最小変数と最大変数を使用して軸を設定します
例えば。もしminph = 8.34、そしてmaxph = 8.36私が宣言するかもしれないなら
var minphscale = minph*0.9
var maxphscale = maxph*1.1
これを変数として実行したい理由は、最新のデータをタイプ ゲージのハイチャートとして提示することにも取り組んでいるからです。変数を使用して色の「バンド」を設定し、特定のシリーズのスイングの量を示します。最新のサンプルとして、実際の系列値も持っていました。変数minphとmaxphがバンドを決定します (そうねえ、それが理にかなっているといいのですが)。
現在のコードは
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<meta http-equiv = "refresh" content = "180">
<meta http-equiv = "cache-control" content = "no-cache">
<title>Daily Data</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var minph = 13;
$(document).ready(function() {
var options = {
credits: {
enabled: false
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
zoomType: 'x',
spacingRight: 2
},
title: {
text: '24hr history',
x: -20 //center
},
subtitle: {
text: 'Temp',
x: -20
},
xAxis: {
tickInterval:60,
categories: []
},
yAxis: [
{ //Primary [0]
title: {
text: 'orp'
},
id: 'ORP',
opposite: true,
min: 350,
max: 450
},
{ //Secondary [1]
title: {
text: 'pH'
},
id: 'pH',
min: 8,
max: 9
},
{ //Tertiary [2]
title: {
text: 'Temp'
},
id: 'Temp',
min: 20,
max: 30,
opposite: false
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
borderWidth: 1
},
series: []
};
$.get('24hr_final.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// Below is an attempt to change UNIX EPOCH to Java EPOCH
// and load into series1 as a date
if (lineNo === 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) {
var javaepoch = (item) / 0.001;
var date = new Date(javaepoch);
options.xAxis.categories.push(date);
}
});
} else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
// Set the Axis for each data type
series.name = item;
if (item == 'pH') {
series.yAxis = item;
}
if (item == 'ORP' ) {
series.yAxis = item;
}
if (item == 'Tank' ) {
series.yAxis = 'Temp';
}
if (item == 'Heater' ) {
series.yAxis = 'Temp';
}
if (item == 'Room' ) {
series.yAxis = 'Temp';
}
// Finished mods for axis
} else {
var minph = 5;
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id = "container" style = "width: 100%; height: 400px; margin: 0 auto">
</div>
<script>
document.write ("Min pH is " + minph + ". <BR>")
</script>
Test 1
</body>
</html>