使用Highcharts渲染器制作笔划宽度动画
Animate stroke-width with Highcharts renderer
我正在使用Highcharts SVG渲染API(渲染器)绘制自定义图表,我想为rect的stroke-width属性设置动画。这是Highcharts文档中提供的示例,但它似乎无法正常工作——除了笔划宽度之外,所有属性都已更改
如果我在Chrome DevTools中打开HTML,我可以看到这样的东西:
<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray"
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect>
笔划宽度是使用驼色样式名称而不是短划线样式名称设置的。
可能有什么变通办法?
是的,有一个变通方法。您可以通过使用jQuery的attr()函数来实现这一点。单击矩形时,将更改笔划宽度属性。
我仍然认为这是一个很好的报告点,也许是作为API的bug?
无论如何,JS代码看起来是这样的:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").attr("stroke-width", "30"); // here you can change the stroke-width
})
.add();
});
要在这里看到它的作用,调整后的JSFIDDLE
版本2
根据你的评论,我编辑了代码。在这种情况下,还可以为笔划宽度设置动画。这是一个简单的解决方案。另一个解决方案是调整我不建议的原始Highcharts库。无论如何,希望它能有所帮助:
$(function () {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300
),
rect = renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'gray',
fill: 'silver',
zIndex: 3
})
.on('click', function () {
rect.animate({
x: 50,
y: 50,
width: 200,
height: 20
})
$("rect").animate(
{ "stroke-width": "10" },
{
duration: 500,
step: function(now) { $(this).attr("stroke-width", now); }
});
})
.add();
});
持续时间可以根据适合您的情况进行调整。请参阅此处的操作:JSFIDDLE
相关文章:
- 如何设置html元素填充的动画
- Highcharts如何显示在设置数据时加载动画
- GWT Highcharts-禁用系列动画
- 无法使用Angular Highcharts设置实心规格图的动画
- 全局关闭HighCharts中的动画
- 使用Highcharts渲染器制作笔划宽度动画
- 用highcharts-ng动画显示皮哈特起始角的变化
- Highcharts NG一次只显示一个点.动画
- Highcharts区域图形动画在setData上
- Highcharts动画每秒多个样条
- Highcharts,当更新图表中的系列数时没有动画
- 用Highcharts动态加载新数据的动画
- Highcharts.js:如何使堆叠区域图形动画平滑
- setdata之后的Highcharts加载动画
- Highcharts动画标记
- 当改变图形类型时,强制Highcharts重新绘制动画
- 在Highcharts角规中,可以延迟针加载动画
- 动画上的Highcharts事件完成了吗
- 用highcharts饼扫描动画
- Highcharts中点的动画