Ответы пользователя по тегу Canvas
  • Как правильно построить график Canvas?

    shushu
    @shushu
    Ну тут как раз все просто.
    После того как получили значения по Y нужно пройтись всем значении и найти максимальный. Ну а дальше уже выбрать максимальное значение Y для отрисовки на графике.

    Или у вас с чем то другим проблемы ?

    Update

    Немного лирическое отступление, надо понимать что практически во всех инструментах, связанных с рисованием, ось Y инвертирована. Т.е координата (0, 0) находится слева вверху! Не снизу нрафика, как мы привыкли воспринимать.

    Второе, надо решить как график должен выглядеть и определить ригионы с самим графиком.
    mDhBZK.jpg
    Тут важно понимать что я сделал отступ слева и снизу для отрисовки деления шкалы. И немного справа и вверху. Я бы вынес эту отступы в конфиг. И использовал конфиг вместо (hardcode) вписывании этих значений в формулы.

    Давайте договоримся что у нас есть следующий конфиг
    • plotMarginXLeft (отступ слева)
    • plotMarginYBottom (отступ снизу)
    • plotMarginXRight (отступ справа)
    • plotMarginYTop (отступ сверху)


    Также, когда мы создаем график, мы передаем ширину и высоту всего графика (width, height), поэтому мы легко можем высчитать область PlotArea и его смещение. Давайте договоримся что мы будем хранить эту облать в переменной
    plotAreaRect = {
        x: ...,
        y: ...,
        width: ...,
        height: ...
    };


    Я надеюсь с этим все понятно.
    Дальше, постройка самого графика (я опущу постройку графика по оси X, процесс очень похож на постройку по оси Y):

    Первым делом нужно найти минимальные и максимальные значения по оси Y. Назовем это minY, maxY
    Далее, нужно найти коефициент зумирования (scaleY). У нас есть (maxY - minY) и эту дистанцию нам надо уместить в plotAreaRect.height .
    следовательно: scaleY = plotAreaRect.height / (maxY - minY)

    Вот практически и все, коефициент расчитан, теперь нужно просчитать значение Y для кажой точки в нашем графике когда мы выводим точку за точкой и соеденяем линии.
    нижеприведенные действия нужно выполнить для каждой точки в нашем графике
    1. Значение Y на нашем графике будет ((Yn - n-ная точка в нашем графике)) Yn * scaleY
    2. Дальше нужно поместить это в правильное место нашего графика, учитывая смещения и инверсность оси Y
    3. finalYn = plotAreaRect.y + plotAreaRect.height - (Yn * scaleY)

    Вот и все в общимто.

    PS: да, я понимаю что "учиталь" из меня не очень, но надеюсь что кое что да понятно и вы поймете как построить этот график :)
    PS2: Я код не реализовывал и конечно же не проверял результат, дайте знать если найдете ошибку или неточность.

    Удачи
    Ответ написан