Phind, Charts, Teach, flickering, Blinking, twinkling, shimmer, CandliStick, Chart, Project

Phind, Charts, Teach, flickering, Blinking, twinkling, shimmer, CandliStick, Chart, Project

Phind

2. Проблема с мерцанием:

Разница в мерцании между Visual Studio и Release режимом связана с двумя факторами:

• В Visual Studio используется оптимизированный режим обновления
• В Release режиме нужно добавить специальную настройку для плавного обновления

Добавьте этот код в метод OnGetChartHtml():                                                           public IActionResult OnGetChartHtml()

{
    var viewer = new RazorChartViewer(HttpContext, "chart1");
    createChart(viewer);
    
    // Добавьте эту строку для плавного обновления
    Response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
    
    return Content(viewer.RenderHTML(), "text/html; charset=utf-8"); 

}  

----------------------------

1. AJAX (ваш текущий подход):
   • Браузер запрашивает новый график через AJAX
   • Сервер создает HTML графика
   • Браузер полностью заменяет содержимое контейнера
   • Это вызывает заметное мерцание, которое вы видите
2. SignalR (Blazor):
   • Устанавливается постоянное соединение
   • Обновления приходят "потоком"
   • DOM обновляется частично, без полной перерисовки
   • Мерцание практически отсутствует

Давайте рассмотрим конкретные решения для каждого подхода:

Оптимизация AJAX с CSS

#chart-container {

    position: relative;

    width: 600px;

    height: 350px;

}

#chart-container img {

    position: absolute;

    top: 0;

    left: 0;

    transition: opacity 0.3s ease-in-out;

}

#chart-container img.fade-out {

    opacity: 0;

}

Добавьте этот CSS к вашему проекту и измените JavaScript для плавного перехода:  

async function refreshChart() {
    const container = document.getElementById('chart-container');
    const oldImg = container.querySelector('img');
    if (oldImg) {
        oldImg.classList.add('fade-out');
        setTimeout(async () => {
            const resp = await fetch('@Url.Page("/Candlestick", "ChartHtml")', {
                method: 'GET',
                headers: { 'Accept': 'text/html' },
                cache: 'no-store'
            });
            const html = await resp.text();
            container.innerHTML = html;
        }, 300);
    }
}

Pros

Не требует изменения архитектуры

Работает с текущим кодом

• Минимальные изменения

Cons

Мерцание все равно может быть заметно

Требует дополнительного CSS кода