c# - Blazor:降低/消除图表的动画速度

Question

在 Blazor 中使用 ChartJs.Blazor 的 BarChart 组件时是否可以降低甚至关闭动画速度？我发现这个 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();
    }
}

扩展来源: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 版本之前修复此问题。如果您现在需要它，您可以子类化 BarOptions 类并自行添加 Animation 属性(类型为 Animation)。然后使用您的子类而不是原始的 BarOptions，并且您也可以将 YourBarOptions.Animation.Duration 设置为 0。
如果您无法做到这一点，请发表评论；我可以包含您需要的代码，但请先自己尝试一下:)

更新

我已经修复了它并发布了新版本。 Release-1.1.0已发布并可用 on nuget .