C# Blazor：降低/消除图表的动画速度

在Blazor中使用ChartJs.Blazor的条形图组件时，是否可以降低甚至关闭动画速度？我发现这个NuGet软件包非常有用，但我不知道如何在我更新条形图时关闭动画。为了更容易被忽略，下面是我正在测试的简化版本：

@using ChartJs.Blazor.ChartJS.BarChart
@using ChartJs.Blazor.ChartJS.BarChart.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes
@using ChartJs.Blazor.ChartJS.Common.Axes.Ticks
@using ChartJs.Blazor.ChartJS.Common.Properties
@using ChartJs.Blazor.ChartJS.Common.Wrappers
@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.Util
@using BootstrapChart1.Data
<h2>Simple Bar Chart</h2>
<div class="row">
    <button class="btn btn-primary" @onclick="AddData">
        Add Data
    </button>
    <button class="btn btn-primary" @onclick="RemoveData">
        Remove Data
    </button>
</div>
<ChartJsBarChart @ref="_barChart"
                 Config="@_barChartConfig"
                 Width="600"
                 Height="300" />

@code {
    private BarConfig _barChartConfig;
    private ChartJsBarChart _barChart;
    private BarDataset<DoubleWrapper> _barDataSet;

    protected override void OnInitialized() {
        _barChartConfig = new BarConfig {
            Options = new BarOptions {

                Title = new OptionsTitle {
                    Display = true,
                    Text = "Simple Bar Chart"
                },

                Scales = new BarScales {
                    XAxes = new List<CartesianAxis> {
                        new BarCategoryAxis {
                            BarPercentage = 0.5,
                            BarThickness = BarThickness.Flex
                        }
                    },
                    YAxes = new List<CartesianAxis> {
                        new BarLinearCartesianAxis {
                            Ticks = new LinearCartesianTicks {
                                BeginAtZero = true
                            }
                        }
                    }

                },
            ResponsiveAnimationDuration = 0,

            }
        };

        _barChartConfig.Data.Labels.AddRange(new[] {"A", "B", "C", "D"});

        _barDataSet = new BarDataset<DoubleWrapper> {
            Label = "My double dataset",
            BackgroundColor = new[] {ColorUtil.RandomColorString(), ColorUtil.RandomColorString(),
            ColorUtil.RandomColorString(), ColorUtil.RandomColorString()},
            BorderWidth = 0,
            HoverBackgroundColor = ColorUtil.RandomColorString(),
            HoverBorderColor = ColorUtil.RandomColorString(),
            HoverBorderWidth = 1,
            BorderColor = "#ffffff"
        };

        _barDataSet.AddRange(new double[] {8, 5, 3, 7}.Wrap());
        _barChartConfig.Data.Datasets.Add(_barDataSet);
    }


    private void AddData() {
        var nowSecond = DateTime.Now.Second;
        _barChartConfig.Data.Labels.Add(nowSecond.ToString());
        _barDataSet.Add(new DoubleWrapper(nowSecond));

        _barChart.Update();
    }
}

@使用ChartJs.Blazor.ChartJs.BarChart
@使用ChartJs.Blazor.ChartJs.BarChart.Axes
@使用ChartJs.Blazor.ChartJs.Common.Axes
@使用ChartJs.Blazor.ChartJs.Common.Axes.Ticks
@使用ChartJs.Blazor.ChartJs.Common.Properties
@使用ChartJs.Blazor.ChartJs.Common.Wrappers
@使用ChartJs.Blazor.Charts
@使用ChartJs.Blazor.Util
@使用BootstrapChart1.Data
简单条形图
添加数据
删除数据
@代码{
专用条形图配置(barChartConfig)；
私人图表JSBarchart(u barChart)；
私有数据集(BarDataset);；
受保护的覆盖无效OnInitialized（）{
_barChartConfig=新的BarConfig{
选项=新的气压选项{
Title=新选项Title{
显示=真，
Text=“简单条形图”
},
刻度=新的条形刻度{
XAxes=新列表{
新BarCategoryAxis{
BarPercentage=0.5，
BarThickness=BarThickness.Flex
}
},
YAxes=新列表{
新BarLinearCartesianAxis{
Ticks=新的线性动脉造影剂{
BeginAtZero=真
}
}
}
},
ResponsiveAnimationDuration=0，
}
};
_barChartConfig.Data.Labels.AddRange（新[]{“A”、“B”、“C”、“D”}）；
_barDataSet=新的barDataSet{
Label=“我的双数据集”，
BackgroundColor=new[]{ColorUtil.RandomColorString（），ColorUtil.RandomColorString（），
ColorUtil.RandomColorString（），ColorUtil.RandomColorString（）}，
BorderWidth=0，
HoverBackgroundColor=ColorUtil.RandomColorString（），
HoverBorderColor=ColorUtil.RandomColorString（），
悬停边界宽度=1，
BorderColor=“#ffffff”
};
_AddRange（新的double[]{8,5,3,7}.Wrap（））；
_barChartConfig.Data.Datasets.Add（_barDataSet）；
}
私有void AddData（）{
var nowSecond=DateTime.Now.Second；
_添加（nowSecond.ToString（））；
_Add（新的DoubleWrapper（nowSecond））；
_Update（）；
}
}

---

扩展源：

我是ChartJs.Blazor库的共同作者之一

要禁用动画，必须尽可能将动画持续时间设置为0。这记录在chart.js-docs中

您已经可以将

BarOptions.ResponsiveAnimationDuration

和

BarOptions.Hover.AnimationDuration

设置为

0

，但目前我们缺少

BarOptions.Animation

选项。有一个拉取请求打开，但尚未合并/释放

我将在下一个nuget版本之前修复此问题。如果您现在需要它，您可以对

BarOptions

类进行子类化，并自己添加

Animation

属性（类型为

Animation

）。然后使用子类而不是原始的

BarOptions

，您还可以将

YourBarOptions.Animation.Duration

设置为

0

。
如果你没有做到这一点，写一篇评论；我可以包含您需要的代码，但请先自己尝试：）

更新

---

我已经修复并发布了一个新版本。已发布并可用。

我成功地做到了这一点，它在我更大的系统中运行得很好。非常感谢。令人惊叹的！请确保接受此答案，以便您的问题被标记为已回答。还考虑一下投票：“@ ZOLLY我编辑了答案，提供了一个新版本的链接。已经修好了，你可以在网上查看。你也应该考虑接受这个答案，这样你的问题就被解决了。你可以通过勾选答案左边的复选标记来实现。谢谢：）