我真的无法想象出来有人已经建议我在处理多个更新时我应该为最后一个动画设置false。但我不知道如何做到这一点。或者仅在使用addPoints()时才适用。这是我的Fiddle和示例代码。
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
$('.zoom_controls a').click(function (e) {
e.preventDefault();
// OK, pretty ugly :)
var call = 'zoom' + $(this).attr('data-range');
// I have two globally accessible charts here:
if ($(this).attr('data-chart') == 'line') {
lineChart[call]();
} else {
candleChart[call]();
}
$(this).addClass('active');
});
var proto = Highcharts.Chart.prototype;
proto.zoomToD = function (delta) {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[0].max;
var min = chartMax - delta;
if (chartMin < min) {
// this.xAxis[0] is the view, this.xAxis[1] is the navigator
this.xAxis[0].setExtremes(min, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
this.yAxis[0].setExtremes(this.series[0].dataMin, this.series[0].dataMax);
return false;
};
proto.zoom3m = function () {
return this.zoomToD(2592000 * 3 * 1000);
};
proto.zoom6m = function () {
return this.zoomToD(2592000 * 6 * 1000);
};
proto.zoom1y = function () {
return this.zoomToD(2592000 * 12 * 1000);
};
proto.zoom2y = function () {
return this.zoomToD(2592000 * 24 * 1000);
};
proto.zoom3y = function () {
return this.zoomToD(2592000 * 36 * 1000);
};
proto.zoom5y = function () {
return this.zoomToD(2592000 * 60 * 1000);
};
proto.zoom10y = function () {
return this.zoomToD(2592000 * 120 * 1000);
};
proto.zoomYtd = function () {
var chartMin = this.xAxis[1].min;
var chartMax = this.xAxis[1].max;
var min = chartMax - 2592000 * 12 * 1000;
if (chartMin < min) {
this.xAxis[0].setExtremes(min, chartMax);
return true;
}
this.xAxis[0].setExtremes(chartMin, chartMax);
return false;
}
/*And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.:*/
var timestampTo = data[data.length - 1][0],
timestampFrom = timestampTo - 365 * 24 * 3600 * 1000;
lineChart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'area'
},
series: [{
id: "data",
name: 'HP',
data: data,
color: '#7BA6A5',
}],
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr>' +
'<td style=\"color: #9c9e9c\"><b>日期:</b><span style="font-weight:bold;color:#7BA6A5"> {point.x:%Y/%m/%d}</span></td></tr>' +
'<tr><td style=\"color: #9c9e9c\"><b>NAV 淨值:</b><span style="font-weight:bold;color:#7BA6A5"> {point.y}</span></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
xAxis: {
min: timestampFrom,
max: timestampTo,
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y',
month: '%m',
week: '%b %e'
},
gridLineWidth: 1
},
yAxis: {
opposite: false,
minorTickInterval: 'auto'
},
rangeSelector: {
enabled: true,
inputPosition: {
align: "left"
}
},
scrollbar: {
enabled: true
},
navigator: {
enabled: true
}
});
lineChart.yAxis[0].setExtremes(lineChart.series[0].dataMin, lineChart.series[0].dataMax);
lineChart.scroller.xAxis.labelGroup.hide();
lineChart.scroller.xAxis.gridGroup.hide();
lineChart.scroller.series.hide();
lineChart.scroller.scrollbar.hide();
lineChart.scroller.scrollbarGroup.hide();
lineChart.scroller.navigatorGroup.hide();
lineChart.scroller.scrollbarTrack.hide();
$.each(lineChart.scroller.elementsToDestroy, function (i, elem) {
elem.hide();
});
lineChart.rangeSelector.zoomText.hide();
$.each(lineChart.rangeSelector.buttons, function () {
this.hide();
});
/*lineChart.rangeSelector.inputEnabled = false;*/
});
});
我忘了提到只有再次点击YTD按钮才会出现。