使用 Highcharts 渲染器为笔画宽度设置动画答案

【问题标题】：Animate stroke-width with Highcharts renderer使用 Highcharts 渲染器为笔画宽度设置动画
【发布时间】：2015-11-06 12:35:23
【问题描述】：

我正在使用 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>

笔划宽度使用驼峰式名称设置，而不是破折号式名称。

可能有一些解决方法？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

是的，有一个解决方法。您可以通过使用 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

【讨论】：

谢谢，@Rotan075。不幸的是，这种解决方法不会为描边宽度设置动画，它会立即更改它。
@rebelraven 您也可以使用 jQuery 进行调整。也许不是一个顺利的解决方案，但我猜它会接近您的偏好。看看我修改后的答案。
谢谢，@Rotan075。第二个版本看起来像我需要的。尽管如此，我还是将问题发布到 Highcharts Github repo link
是的，很好！很高兴我可以帮助创建某种解决方法！ ;) 希望他们能解决这个“错误”@rebelraven