我创建了图形（高图图），其中我添加了3个自定义按钮示例在这里
$(function () {
var averageLabel =[1278302400000, 1286251200000, 1294203600000, 1301976000000, 1309838400000, 1317787200000, 1325739600000, 1333598400000, 1341460800000, 1349409600000, 1357362000000, 1365134400000, 1372996800000, 1380945600000, 1388898000000, 1396670400000, 1404532800000, 1412481600000, 'THIS YR', 'NEXT YR'];
var growthData = [85.43, 76.12, 70.19, 66.77, 54.47, 67.33, 62.32, 53.71, 25.78, 7.55, -1.51, -9.32, -10.14, -3.76, 4.51, 9.36, 11.67, 24.12, '19.69##red', '23.45##red'];
for(var i = 0; i < growthData.length; i++){
if (typeof growthData[i] == 'string') {
var valData = growthData[i].split('##');
var dtpoint = parseFloat(valData[0]);
var dtcolor = valData[1];
} else {
var dtpoint = growthData[i];
var dtcolor = "";
}
growthData[i] = {//x: categories[i],
y:dtpoint,
color:dtcolor}
}
var chartY = new Highcharts.Chart({
chart: {
height: 400,
renderTo: 'container',
type: 'line',
marginBottom: 100,
marginTop: 100,
marginLeft: 40,
marginRight: 100,
},
title: {
text: "Growth Rate - Yearly",
align: 'center',
x: 10,
y: 20,
style: {
fontWeight: 'bold'
}
},
xAxis: {
//max: ,
categories: averageLabel,
type: 'datetime',
labels: {
formatter: function () {
var s = "";
if (typeof this.value == 'string') {
s = this.value
};
if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
s = Highcharts.dateFormat('%Y', this.value) + "-";
s = s + "Q1"
};
if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
s = Highcharts.dateFormat('%Y', this.value) + "-";
s = s + "Q2"
};
if (Highcharts.dateFormat('%b', this.value) == 'Jul' ) {
s = Highcharts.dateFormat('%Y', this.value) + "-";
s = s + "Q3"
};
if (Highcharts.dateFormat('%b', this.value) == 'Oct' ) {
s = Highcharts.dateFormat('%Y', this.value) + "-";
s = s + "Q4"
};
//s = Highcharts.dateFormat('%Y', this.value) + "-" + s;
return s;
},
rotation: -45,
},
//tickInterval: 3 * 30 * 24 * 3600 * 900,
},
tooltip: {
formatter: function () {
var s = '';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "Q1"
};
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "Q2"
};
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "Q3"
};
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "Q4"
};
if (typeof this.x == 'string') {
s = this.x;
} else {
s = Highcharts.dateFormat('%Y', this.x) + '-'+ s;
}
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': <b>';
s += Highcharts.numberFormat(point.y, 2, '.');
s += '%</b>';
});
return s;
},
shared: true,
valueDecimals: 2,
valueSuffix: ' %'
},
yAxis: {
endOnTick: true,
allowDecimals: false,
min: -10.14,
opposite: true,
labels: {
formatter: function() {
return this.value+'%';
}
},
title: {
text: ''
},
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'top',
floating: true,
x: 0,
y: 40
},
credits: {
enabled: false,
},
series: [{
data: growthData,
name: "EPS growth"
}],
});
var my1Button = chartY.renderer.button('1 Yr.',450,58,my1Callback, {
zIndex: 7
}).attr({
align: 'right',
}).add();
var my3Button = chartY.renderer.button('3 Yr.',510,58,my13Callback, {
zIndex: 7
}).attr({
align: 'right',
}).add();
var myAllButton = chartY.renderer.button('All',548,58,myAllCallback, {
zIndex: 7
}).attr({
align: 'right',
}).add();
var i = 1;
function my1Callback()
{
//chartY.xAxis[0].setExtremes(,);
chartY.series[0].setData([4.51,9.36,11.67,24.12],false, {duration: 200, easing: 'easein'});
// chartY.series[0].data[0].update(200 );
chartY.xAxis[0].setCategories([1388898000000,1396670400000,1404532800000,1412481600000]);
chartY.redraw( );
}
function my13Callback()
{
//chartY.xAxis[0].setExtremes(,);
chartY.series[0].setData([62.32,53.71,25.78,7.55,-1.51,-9.32,-10.14,-3.76,4.51,9.36,11.67,24.12],false, {duration: 200, easing: 'easein'});
chartY.xAxis[0].setCategories([1325739600000,1333598400000,1341460800000,1349409600000,1357362000000,1365134400000,1372996800000,1380945600000,1388898000000,1396670400000,1404532800000,1412481600000]);
// chartY.series[0].data[0].update(200 );
chartY.redraw( );
}
function myAllCallback()
{
//chartY.xAxis[0].setExtremes();
chartY.series[0].setData(growthData,false, {duration: 200, easing: 'easein'});
chartY.xAxis[0].setCategories(averageLabel);
// chartY.series[0].data[0].update(200 );
}
});
jsfiddle中显示的每个按钮重置yAsix＆amp; xAsis但缺少动画，因为它比较默认加载的方式（第一次加载图形时） 我已经尝试了一些方法（代码在给定的jsfiddle链接中）但是它不是很顺利请帮忙！
答案 0 :(得分：0)
任何系列的初始动画都与其他系列不同。在第一个动画期间，剪切rect是动画的，而不是系列本身。因此解决方案是使用remove()和addSeries()而不是setData()：
function my13Callback() {
chartY.series[0].remove(false);
chartY.xAxis[0].setCategories([1325739600000, 1333598400000, 1341460800000, 1349409600000, 1357362000000, 1365134400000, 1372996800000, 1380945600000, 1388898000000, 1396670400000, 1404532800000, 1412481600000], false);
chartY.addSeries({
data: [Math.random() * 100, 53.71, 25.78, 7.55, -1.51, -9.32, -10.14, -3.76, 4.51, 9.36, 11.67, 24.12],
name: "EPS growth"
}, true, {
duration: 200
});
}
演示：http://jsfiddle.net/eszwd420/7/
注意：它看起来像在4.0.4中正常工作，而4.1有点破碎..