Блог

У меня есть радчарт telerik, который отображает красивую и невероятно полезную для конечного пользователя линейную диаграмму.

Одним из требований к этой диаграмме было наличие перекрестия со значением x на графике (например, когда пользователь наводит курсор на любую точку графика, появляется горизонтальная линия, и там, где эта линия пересекает фактическую линию графика, значение отображается в другой области экрана).

На предыдущей итерации я использовал flotJS для построения графиков и перекрестий, работал отлично и быстро. При преобразовании этого в silverlight я увидел огромное отставание, и я хотел бы знать, есть ли у кого-нибудь идеи по повышению производительности.

В настоящее время я выставляю события MouseEnter / MouseLeave диаграммы, чтобы скрыть / показать горизонтальную линию. Это делается через систему.Свойство Windows.Visibility находится в моей viewmodel (к которому привязано свойство видимости моего перекрестия). Затем я использую метод MouseMove для фактического вычисления позиции x.

Вот код, который запускает это (первый в коде моего представления диаграммы)

 private void rad_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    var plotAreaPanel = this.rad.DefaultView.ChartArea.ChildrenOfType<ClipPanel>().FirstOrDefault();
    var position = e.GetPosition(plotAreaPanel);

    var x = rad.DefaultView.ChartArea.AxisX.ConvertPhysicalUnitsToData(position.X);
    (this.DataContext as ViewModels.DateCountsViewModel).XVolume = x;
}

private void rad_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
    (this.DataContext as ViewModels.DateCountsViewModel).XVolumeVisibility = System.Windows.Visibility.Visible;
}

private void rad_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
    (this.DataContext as ViewModels.DateCountsViewModel).XVolumeVisibility = System.Windows.Visibility.Collapsed;
}
 

Затем в моей viewmodel, в установщике для XVolume (который устанавливается в методе MouseMove выше), этот код:

     public double XVolume
    {
        get { return xVolume; }
        set
        {
            this.xVolume = value;
            decimal currentX = (decimal)Math.Round(value, 0);
            var vol = this.VolumeCollection.Where(x => x.XValue == currentX).FirstOrDefault() as Models.ChartModel;
            this.Volume = (vol == null) ? 0 : (int)vol.YValue;
            RaisePropertyChanged("XVolume");
        }
    }
 

При интенсивном использовании линия отстает от моего указателя на несколько дюймов. Я попытался регулировать мои события мыши, описанные здесь, но это все еще очень запаздывает.

[Примечание относительно ссылки выше: он использует CompositionTarget.Событие рендеринга, которое запускается непосредственно перед рендерингом кадра. Поэтому, чтобы ограничить эффект события мыши, мы устанавливаем флаг, указывающий на то, что мы ожидаем отрисовки изменения, а затем сбрасываем этот флаг непосредственно перед тем, как произойдет отрисовка… не позволяет выполнять одновременный рендеринг]

Что я могу сделать, чтобы уменьшить это отставание?