我的项目有问题。 我想在我的高档图表中添加一个按钮（3个按钮）来缩放我的YAxis。单击值应从文本字段中读取，并应设置yAxis的最小值/最大值。我在文档中找到了函数setExtremes（min，max），但我无法使其工作。我的图表的图片链接如下，我的代码也是如此。我很感谢任何帮助和解决方案。 此致 帕特里克
<!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>
