Highcharts afterAnimate与xAxis max结合使用

我们正在开发一些使用Highcharts的图表。 我们使用的是

series.events.afterAnimate

和

xAxis.max

值

但是，例如，当我们有从1月到9月的点，但在12月之前使用xAxis.max值时，

afterAnimate

函数在到达12月时被调用

但我们希望在绘制所有有效点时进行回调，而不是在它达到其最大值时

---

这可能吗？

这是因为clipPath宽度默认等于绘图区域的宽度。若要更改它，您可以覆盖

Highcharts.Series.animate

方法，并将clipPath width设置为特定系列的相等宽度

编辑：

另外，请注意，当clipPath的宽度较短且动画的持续时间相同时，动画将慢得多。为了使它看起来更好，必须缩短时间-它可以根据系列宽度进行计算，并在图表

load

event中更新

检查下面发布的演示和代码：

代码：

（功能（H）{
H.Series.prototype.animate=函数（init）{
var系列=此，
chart=series.chart，
克里普雷克特，
动画=H.animObject（series.options.animation），
sharedClipKey；
//初始化动画。设置剪切矩形。
if（init）{
setClip（动画）；
//运行动画
}否则{
sharedClipKey=this.sharedClipKey；
clipRect=图表[sharedClipKey]；
if（clipRect）{
动画({
宽度：series.group.getBBox（）.width，
x:0
}(动画),；
}
如果（图表[sharedClipKey+'m']）{
图表[sharedClipKey+'m']。设置动画({
宽度：chart.plotSizeX+99，
x:0
}(动画),；
}
//删除此函数以仅允许它一次
series.animate=null；
}
}
})（高图）；
Highcharts.setOptions({
图表：{
活动：{
加载：函数（）{
var图表=此，
系列=图表。系列[0]，
seriesWidth=series.graph.getBBox（）.width，
持续时间=（seriesWidth/chart.plotWidth）*series.options.animation.duration；
chart.series[0]。更新({
动画：{
持续时间：持续时间
}
});
}
}		
},
打印选项：{
系列：{
动画：{
持续时间：2000年
}
}
}
});
Highcharts.chart（'容器'{
标题：{
文本：“图表有一半数据，但有最大数据”
},
副标题:{
文本：“绘制所有点时应显示标签”
},
xAxis：{
键入：“日期时间”，
最小值：UTC日期（2019,0,1），
最大值：UTC日期（2019年11月31日），
时间间隔：259200000，//月
},
打印选项：{
系列：{
活动：{
afterAnimate:function（）{
this.chart.renderer.label（this.name+'已出现'，100,70）
艾特先生({
填充：10，
填充：Highcharts.getOptions（）.Color[0]
})
.css({
颜色：“白色”
})
.add（）；
}
}
}
},
系列：[{
数据：[{
x:UTC日期（2019年0月1日），
y:29.9
},
{
x:UTC日期（2019年1月1日），
y:139.9
},
{
x:UTC日期（2019年2月1日），
y:59.9
},
{
x:UTC日期（2019年3月1日），
y:19.9
},
]
}]
});
海图。海图（'container2'{
标题：{
文本：“包含完整数据的图表”
},
副标题:{
text:“设置动画后，绘图区域上应显示一个标签”
},
xAxis：{
键入：“日期时间”，
最小值：UTC日期（2019,0,1），
最大值：UTC日期（2019年11月31日），
时间间隔：259200000，//月
},
打印选项：{
系列：{
活动：{
afterAnimate:function（）{
this.chart.renderer.label（this.name+'已出现'，100,70）
艾特先生({
填充：10，
填充：Highcharts.getOptions（）.Color[0]
})
.css({
颜色：“白色”
})
.add（）；
}
}
}
},
系列：[{
数据：[{
x:UTC日期（2019年0月1日），
y:29.9
},
{
x:UTC日期（2019年1月1日），
y:139.9
},
{
x:UTC日期（2019年2月1日），
y:59.9
},
{
x:UTC日期（2019年3月1日），
y:19.9
},
{
x:UTC日期（2019年4月1日），
y:29.9
},
{
x:UTC日期（2019年5月1日），
y:139.9
},
{
x:UTC日期（2019年6月1日），
y:59.9
},
{
x:UTC日期（2019年7月1日），
y:19.9
},
{
x:UTC日期（2019年8月1日），
y:29.9
},
{
x:UTC日期（2019年9月1日），
y:139.9
},
{
x:UTC日期（2019年10月1日），
y:59.9
},
{
x:UTC日期（2019年11月1日），
y:19.9
},
]
}]
});
这是因为clipPath宽度默认等于绘图区域的宽度。若要更改它，您可以覆盖
Highcharts.Series.animate
方法，并将clipPath width设置为特定系列的相等宽度

编辑：

另外，请注意，当clipPath的宽度较短且动画的持续时间相同时，动画将慢得多。为了使它看起来更好，必须缩短时间-它可以根据系列宽度进行计算，并在图表
load
event中更新

检查下面发布的演示和代码：

代码：


（功能（H）{
H.Series.prototype.animate=函数（init）{
var系列=此，
chart=series.chart，
克里普雷克特，
动画=H.animObject（series.options.animation），
sharedClipKey；
//初始化动画