Использование диаграмм React Google

Работая над приложением для отслеживания финансовых операций, я понял, что мне нужен какой-то способ отображения всех этих данных. Так начались мои поиски библиотеки графиков, после того как я попробовал несколько и наткнулся на библиотеку, которая стоила более 200 долларов. В итоге я остановился на использовании React Google Charts.

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

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

Если вы похожи на меня, вам нравятся примеры, потому что вместо того, чтобы изучать, как все работает, вы можете просто скопировать уже существующий пример, который достаточно близок, и настроить его по своему вкусу (или настроить его как можно лучше, поскольку вы не знаете, как все работает).


(Огромный респект этому генератору градиентов, он отлично подходит для создания цветовых градиентов, цветовых схем и всех ваших цветовых потребностей)

<Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={budgetPieData}
          options={{
            pieSliceText: "none",
            pieHole: 0.6,
            backgroundColor: "none",
            colors: [
              "#26cd4d",
              "#00c065",
              "#00b377",
              "#00a483",
              "#00958a",
              "#00858b",
              "#007685",
              "#00667b",
              "#0f576b",
              "#2a4858",
              "#28687d",
              "#168ba0",
              "#00b0be",
              "#00d6d6",
              "#05fce8",
              "#00fed9",
              "#00ffc6",
              "#00ffb0",
              "#00ff96",
              "#00ff78",
            ],
          }}
        />
Войдите в полноэкранный режим Выход из полноэкранного режима

Хотя он, безусловно, функционален и дает достаточно много возможностей для настройки, я обнаружил, что с ним становится все сложнее работать, чем сложнее мои потребности (форматирование данных для диаграмм со столбцами — это просто кошмар), но в целом он работает достаточно хорошо.

Использовали ли вы React Google Charts? Знаете ли вы что-то еще лучше? Я бы очень хотел услышать об этом, а пока — удачи и начинайте кодить!

Оцените статью
Procodings.ru
Добавить комментарий