我正在使用Highcharts SVG渲染API(Renderer)绘制自定义图表,并且想为rect的stroke-width属性设置动画。 Here is 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>
笔划宽度是使用 Camel 样式名称而不是破折号样式名称设置的。可能有一些解决方法?
最佳答案
是的,有一种解决方法。您可以通过使用jQuery的attr()函数来实现。当您单击矩形时,将更改笔划宽度属性。
我仍然认为这是报告API错误的好点吗?
无论如何,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