我正在使用 Highcharts SVG 渲染 API(渲染器)绘制自定义图表,我想为 rect 的 stroke-width 属性设置动画。 Here is Highcharts 文档中提供的示例,但它似乎无法正常工作 - 除了 stroke-width 之外的所有属性都已更改。
如果我在 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() 函数来实现这一点。当您单击矩形时,您会更改 stroke-width 属性。
我仍然认为这是一个很好的观点,也许可以作为 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
关于javascript - 使用 Highcharts 渲染器设置笔画宽度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33566943/