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

Question

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

@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();
    }
}

扩展源：https : //github.com/mariusmuntean/ChartJs.Blazor

Answer 1

我是 ChartJs.Blazor 库的合著者之一。

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

你已经可以设置BarOptions.ResponsiveAnimationDuration和BarOptions.Hover.AnimationDuration到0，但目前我们缺少的BarOptions.Animation选项。有一个拉取请求打开但尚未合并/发布。

我会在下一个 nuget-release 之前解决这个问题。如果您现在需要它，您可以子类化BarOptions该类并自己添加Animation属性（类型Animation）。然后用你的子类，而不是原来的BarOptions，你可以设置YourBarOptions.Animation.Duration到0为好。
如果您无法做到这一点，请发表评论；我可以包含您需要的代码，但请先尝试一下:)

更新

我已经修复它并发布了一个新版本。Release-1.1.0已发布并可在 nuget 上使用。