Чарты и Вы. Chart.js

В какой-то момент вам будет предложено подготовить серию графиков или диаграмм для вашего бизнеса. Сначала это страшно. С чего начинать? Но к счастью, вы обнаружите что благодаря инструментам, таким как Chart.js, никогда не было так легко выполнить такую задачу.

Обзор уроков курса:

• Линейный график за 5 минут

Начнем с «привет мир» графиков, используя отличную библиотеку Chart.js. Просмотрите источник этого первого примера на JSBin.com.

• Использование NPM, Browserify и Elixir

Давайте сделаем еще один шаг. Что, если мы потянем Chart.js через NPM, а затем применим Browserify, чтобы мы могли написать современный код ES6? Давайте начнем с этого рабочего процесса в этом эпизоде.

• Компонент Vue - Graph

Давайте продолжим работу над структурой, поскольку мы создаем многократно используемый компонент Vue. Если вы проработали свой путь через любую серию Vue в Laracasts, все это должно быть понятно для вас!

Просмотрите соответствующий источник этого урока на GitHub.

• Легенды

Chart.js может автоматически генерировать диаграмму «легенда» для вас; однако вам нужно вставить его в DOM и добавить любой подходящий стиль. В этом уроке я покажу вам основной рабочий процесс.

• Dedicated Graph Vue Components

В этом уроке мы создадим главный компонент Graph, к которому могут распространяться все другие определенные графики. Таким образом, мы можем использовать настраиваемые свойства, которые уникальны для каждого типа графиков, которые требуются приложениям.

Посмотрите источник этого урока на GitHub.

• Рендерим ежемесячный доход

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

Посмотрите источник этого урока на GitHub.

• Graphs и AJAX

Давайте добавим кастом свойство url к нашему компоненту graph, а затем применим плагин Vue Resource для выполнения запроса.

Просмотрите исходный код этого урока на GitHub.

• Динамические графики

Как мы можем сделать наши графики более динамичными? Возможно мы хотим ограничить доход только х дней; и, кроме того, мы должны иметь возможность изменять этот диапазон «на лету», не требуя перезагрузки страницы. Хорошо, я покажу вам  как это сделать!

Просмотрите исходный код этого урока на GitHub.