1
工作我改写为原型和Scriptaculous一个以前精美的工作，并兼容MooTools的“toggler”系统，该系统允许两个不同HighCharts图形在页面上的相同空间中切换的外观。它在IE11，Chrome浏览器，火狐，Safari浏览器的伟大工程，但明确了“拨动”系统不工作，IE9和10这两个HighCharts可以正确地呈现，但.setStyle .appear和.fade似乎没有被影响所有的CSS。的Javascript“toggler”功能IE9或IE10（IE8已经有一套备用）没有工作，但在IE11，Chrome浏览器，火狐
document.observe("dom:loaded", function() {
$("rdb1").observe("click", function(){
$("2253-2").setStyle({'opacity': '0'}),
$("2253-2").setStyle({'top': '-9999em'}),
$("btnID-2").fade({duration: .01}),
$("zoomOut-2").fade({duration: .01}),
$("2253-1").appear({duration: .1}),
$("2253-1").setStyle({'top': '0'}),
$("btnID-1").appear({duration: .01}),
$("zoomOut-1").appear({duration: .01}),
$("clr0").setStyle({'margin-bottom': '26px'})
});
$("rdb2").observe("click", function(){
$("2253-1").setStyle({'opacity': '0'}),
$("btnID-1").fade({duration: .01}),
$("zoomOut-1").fade({duration: .01}),
$("2253-2").setStyle({'top': '0'}),
$("2253-2").appear({duration: .1}),
$("btnID-2").appear({duration: .01}),
$("zoomOut-2").appear({duration: .01}),
$("clr0").setStyle({'margin-bottom': '26px'})
});
});
和HTML：
<div id="legendwrap" class="noPrint">
<h4 class="chartViewLabel">View:</h4>
<label class="viewSelectBtn"><input id="rdb1" type="radio" name="toggler" value="1" checked/> %T</label>
<label class="viewSelectBtn"><input id="rdb2" type="radio" name="toggler" value="2" /> OD</label>
</div>
<div id="zoomwrap" style="float:left;text-align:left;margin-top:-1px;margin-left:2px;zoom: 1;display: block;z-index:2;overflow: hidden;" class="noPrint">
<button id="zoomOut-1" class="btnz" style="z-index:2;position:relative;" ><i class="fa fa-search-minus"></i></button>
<button id="zoomOut-2" class="btnz" style="z-index:3;position:relative;opacity:0;"><i class="fa fa-search-minus"></i></button>
</div>
<div id="buttonwrap" style="float:right;text-align:right;margin:0 12px 0 10px;overflow: hidden;zoom: 1;display: block;">
<div id="btnID-1" class="toHide" style="position:relative;padding-top:0px;overflow: hidden;zoom: 1;display: block;">
<button id="helpBtn" class="btnz" ><i class="fa fa-question"></i></button>
<button id="printit" class="btnz" ><i class="fa fa-print"></i></button>
<button id="exportPNG" class="btnz" ><i class="fa fa-file-image-o"></i></button>
<button id="exportPDF" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>
<button id="exportCSV" class="btnz" ><i class="fa fa-file-text-o"></i></button>
</div>
<div id="btnID-2" class="toHide" style="position:relative;opacity:0;overflow: hidden;zoom: 1;display: block;"> <button id="helpBtn2" class="btnz" ><i class="fa fa-question"></i></button>
<button id="printit2" class="btnz" ><i class="fa fa-print"></i></button>
<button id="exportPNG2" class="btnz" ><i class="fa fa-file-image-o"></i></button>
<button id="exportPDF2" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>
<button id="exportCSV2" class="btnz" ><i class="fa fa-file-text-o"></i></button>
</div>
</div>
<!--Line break and margin correction-->
<div id="clr0" class="clr" style="clear:both;line-height:0;"> </div>
<!--Render the chart-->
<div id="graphwrap" style="position: relative;left: 0px;height:500px;">
<div id="2253-1" class="toHide" style="position:relative;margin-bottom:-500px;" ></div>
<div id="2253-2" class="toHide" style="position:relative;opacity:0;top:-9999em;" ></div>
</div>
A位版本的例子是在这里：http://buy.alluxa.com/317-5-1-5-od6-ultra-narrow-bandpass.html
我拉我的头发与这一个。任何提示，甚至预感将不胜感激。非常感谢。