Javascript Highstock，使用按钮缩放3个不同的yAxis
我的项目有些问题。 我想在我的highstock图表中添加一个按钮（3个按钮），用于缩放我的YAxis。单击时，应从文本字段中读取值，并设置yAxis的最小/最大值。我在文档中找到了setextrems（min，max）函数，但我无法让它工作。下面链接了我的图表图片和我的代码。我非常感谢任何帮助和解决方案。 谨上 帕特里克Javascript Highstock，使用按钮缩放3个不同的yAxis,javascript,button,highcharts,highstock,zooming,Javascript,Button,Highcharts,Highstock,Zooming,我的项目有些问题。 我想在我的highstock图表中添加一个按钮（3个按钮），用于缩放我的YAxis。单击时，应从文本字段中读取值，并设置yAxis的最小/最大值。我在文档中找到了setextrems（min，max）函数，但我无法让它工作。下面链接了我的图表图片和我的代码。我非常感谢任何帮助和解决方案。 谨上 帕特里克 CA01 $（函数（）{ var filename=window.location.pathname； var mysplit=filename.split（'/'，6）；
CA01
$（函数（）{
var filename=window.location.pathname；
var mysplit=filename.split（'/'，6）；
filename=mysplit[4]；
var系列选项=[]，
序列计数器=0，
名称=['CA01F01X_OPC'、'CA01F01XSUM_OPC'、'CA01F02X_OPC'、'CA01F03X_OPC'、'CA01F03X_OPC'、'CA01P01SP_OPC'、'CA01P02SP_OPC'、'CA01P02SP_OPC'、'CA01T01SP_OPC'、'CA01T01ASP_OPC']，
createChart=函数（）{
$（“#容器”）.highcharts（'StockChart'{
//滴度
标题：{
text:filename，
x:-20/中心
},
//安特泰尔酒店
副标题:{
文本：“CA01”，
x:-20
},
范围选择器：{
按钮：[{
键入：“分钟”，
计数：30，
文字：“30分钟”
},{
键入：“小时”，
计数：1，
文本：“1h”
},{
键入：“小时”，
计数：12，
文字：“12小时”
}, {
键入：'天'，
计数：1，
文本：“1d”
},
{
键入：“全部”，
文字：“全部”
}],
已选：0
},
数据分组：{
近似值：“高”
},
xAxis：{
网格线宽度：1
},
//y-Achsen
亚克斯：[
{
标签：{
格式：“{value}”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
标题：{
文字：“温度[°C]”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
身高：30%，
线宽：1，
偏移量：0，
//阿切塞特酒店
反面：错，
//最小值，最大值：für最大值
分:0,，
最小填充：0.02，
最大填充：0.02，
minorTickInterval:“自动”，
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}
]
},
//2.乙酰胆碱酯酶
{
标签：{
格式：“{value}”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
标题：{
文本：“Druck[bar]”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
//赫赫德阿切斯酒店
身高：30%，
//奥伯伦·比尔德兰德（damit zwei achsen nichtübereinder liegen）的作品
前三名：“34%，
线宽：1，
偏移量：0，
反面：错，
分:0,，
最小填充：0.02，
最大填充：0.02，
minorTickInterval:“自动”，
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
}]
},
//3.乙酰胆碱酯酶
{
标签：{
格式：“{value}”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
标题：{
文本：“durcfluss[Nl/h]”，
风格：{
颜色：Highcharts.getOptions（）.color[1]
}
},
身高：15%，
排名前：'67%'，
线宽：1，
偏移量：0，
反面：错，
分:0,，
最小填充：0.02，
最大填充：0.02，
minorTickInterval:“自动”，
绘图线：[{
值：0，
宽度：2，
颜色：“银色”
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> CA01</title>
<script type="text/javascript" src="../../Highstock-2.1.8/exporting-server/phantomjs/jquery.1.9.1.min.js"></script>
<script type='text/javascript'>
$(function () {
var filename = window.location.pathname;
var mysplit = filename.split('/', 6);
filename = mysplit[4];
var seriesOptions = [],
seriesCounter = 0,
names = ['CA01F01X_OPC', 'CA01F01XSUM_OPC', 'CA01F02X_OPC', 'CA01F02XSUM_OPC', 'CA01F03X_OPC', 'CA01F03XSUM_OPC', 'CA01P01X_OPC', 'CA01P01ASP_OPC', 'CA01P02X_OPC','CA01P02ASP_OPC','CA01T01X_OPC','CA01T01ASP_OPC'],
createChart = function () {
$('#container').highcharts('StockChart', {
//Titel
title: {
text: filename,
x: -20 //center
},
//Untertitel
subtitle: {
text: 'CA01',
x: -20
},
rangeSelector: {
buttons: [{
type: 'minute',
count:30,
text: '30min'
},{
type: 'hour',
count: 1,
text: '1h'
},{
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
},
{
type: 'all',
text: 'all'
}],
selected: 0
},
dataGrouping: {
approximation: 'high'
},
xAxis: {
gridLineWidth: 1
},
//y-Achsen
yAxis: [
{
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title:{
text: 'Temperatur [°C]',
style: {
color: Highcharts.getOptions().colors[1]
}
},
height: '30%',
lineWidth: 1,
offset: 0,
//Seite der Achse
opposite: false,
//Minimum, max: für Maximum
min: 0,
minPadding: 0.02,
maxPadding: 0.02,
minorTickInterval: 'auto',
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}
]
},
//2.Achse
{
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Druck [bar]',
style: {
color: Highcharts.getOptions().colors[1]
}
},
//Höhe der Achse
height: '30%',
//Abstand der Achse vom oberen Bildrand (damit zwei achsen nicht übereinander liegen)
top: '34%',
lineWidth: 1,
offset: 0,
opposite: false,
min: 0,
minPadding: 0.02,
maxPadding: 0.02,
minorTickInterval: 'auto',
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
//3.Achse
{
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Durchfluss [Nl/h]',
style: {
color: Highcharts.getOptions().colors[1]
}
},
height: '15%',
top: '67%',
lineWidth: 1,
offset: 0,
opposite: false,
min: 0,
minPadding: 0.02,
maxPadding: 0.02,
minorTickInterval: 'auto',
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
//4. Achse
{
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Volumen [Nl]',
style: {
color: Highcharts.getOptions().colors[1]
}
},
height: '15%',
top: '85%',
lineWidth: 1,
offset: 0,
opposite: false,
min: 0,
minPadding: 0.02,
maxPadding: 0.02,
minorTickInterval: 'auto',
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}
],
plotOptions: {
series: {
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'vertical',
align: 'center',
layout: 'horizontal',
borderWidth: 1
},
series: seriesOptions
});
};
$.each(names, function (i, name) {
//load Data
$.getJSON(name+'.json', function (data) {
if(name.contains('T01X')){
name = 'T01X'
} else if (name.contains('T01ASP')){
name='T01ASP'
} else if (name.contains('P01X')){
name='P01X'
} else if (name.contains('P01ASP')){
name='P01ASP'
} else if (name.contains('P02X')) {
name = 'P02X'
} else if (name.contains('P02ASP')) {
name = 'P02ASP'
} else if (name.contains('F01XSUM')) {
name = 'F01XSUM'
} else if (name.contains('F01X')) {
name = 'F01X'
} else if (name.contains('F02XSUM')) {
name = 'F02XSUM'
} else if (name.contains('F02X')) {
name = 'F02X'
} else if (name.contains('F03XSUM')) {
name = 'F03XSUM'
} else if (name.contains('F03X')) {
name = 'F03X'
}
//choose y-Axis
if (name === 'T01X'||name==='T01ASP') {
seriesOptions[i] = {
name: name,
data: data,
yAxis: 0
};
} else if (name === 'P01X' || name === 'P01ASP' || name === 'P02X' || name === 'P02ASP') {
seriesOptions[i] = {
name: name,
data: data,
yAxis: 1
};
} else if (name === 'F01X'|| name==='F02X'||name==='F03X') {
seriesOptions[i] = {
name: name,
data: data,
yAxis: 2
};
} else {
seriesOptions[i] = {
name: name,
data: data,
yAxis: 3
};
};
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
</script>
<script src="../../Highstock-2.1.8/js/highstock.js"></script>
</head>
<body>
<div id="container" style="height: 1050px; min-width: 310px"></div>
<div id = "test">
Kommentar
<input type="text" name="spind" value="" size="310" />
</div>
</body>
</html>