Blazor: Уменьшить / устранить скорость анимации графика - PullRequest
3 голосов
/ 24 марта 2020

возможно ли уменьшить или даже отключить скорость анимации при использовании компонента Chart Js .Blazor's BarChart в Blazor? Я нашел этот пакет 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

1 Ответ

3 голосов
/ 24 марта 2020

Я один из соавторов библиотеки Chart Js .Blazor.

Чтобы отключить анимацию, вы должны установить продолжительность анимации на 0, где это возможно. Это задокументировано на диаграмме. js -документы раздел производительности .

Вы уже можете установить BarOptions.ResponsiveAnimationDuration и BarOptions.Hover.AnimationDuration на 0, но в настоящее время мы отсутствует опция BarOptions.Animation. Пул-запрос открыт, но еще не объединен.

Я исправлю это перед следующим выпуском nuget. Если вам это нужно прямо сейчас, вы можете создать подкласс класса BarOptions и добавить свойство Animation (типа Animation) самостоятельно. Затем используйте свой подкласс вместо исходного BarOptions, и вы также можете установить YourBarOptions.Animation.Duration на 0.
Если вам не удается это сделать, напишите комментарий; Я могу включить код, который вам нужен, но, пожалуйста, сначала попробуйте сами:)

Обновление

Я исправил его и выпустил новую версию. Выпуск-1.1.0 опубликован и доступен на nuget .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...