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

Question

我正在使用Highcharts SVG渲染API(渲染器)绘制自定义图表,我想为rect的stroke-width属性设置动画.以下是 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>

使用驼峰式名称设置笔划宽度,而不是使用破折号样式名称.

可能有一些解决方法吗？

Answer 1

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