В какой-то момент вам будет предложено подготовить серию графиков или диаграмм для вашего бизнеса. Сначала это страшно. С чего начинать? Но к счастью, вы обнаружите что благодаря инструментам, таким как Chart.js, никогда не было так легко выполнить такую задачу.
Обзор уроков курса:
- Линейный график за 5 минут
Начнем с «привет мир» графиков, используя отличную библиотеку Chart.js. Просмотрите источник этого первого примера на JSBin.com.
- Использование NPM, Browserify и Elixir
Давайте сделаем еще один шаг. Что, если мы потянем Chart.js через NPM, а затем применим Browserify, чтобы мы могли написать современный код ES6? Давайте начнем с этого рабочего процесса в этом эпизоде.
Давайте продолжим работу над структурой, поскольку мы создаем многократно используемый компонент Vue. Если вы проработали свой путь через любую серию Vue в Laracasts, все это должно быть понятно для вас!
Просмотрите соответствующий источник этого урока на GitHub.
Chart.js может автоматически генерировать диаграмму «легенда» для вас; однако вам нужно вставить его в DOM и добавить любой подходящий стиль. В этом уроке я покажу вам основной рабочий процесс.
- Dedicated Graph Vue Components
В этом уроке мы создадим главный компонент Graph, к которому могут распространяться все другие определенные графики. Таким образом, мы можем использовать настраиваемые свойства, которые уникальны для каждого типа графиков, которые требуются приложениям.
Посмотрите источник этого урока на GitHub.
- Рендерим ежемесячный доход
Представьте себе, что ваш босс назначает вам задачу предоставления графика для отображения ежемесячного дохода компании. Похоже, нам нужно будет выполнить правильный запрос до базы данных, и тогда мы конечно, передадим эти данные нашему компоненту Graph. Давайте начнем.
Посмотрите источник этого урока на GitHub.
Давайте добавим кастом свойство url к нашему компоненту graph, а затем применим плагин Vue Resource для выполнения запроса.
Просмотрите исходный код этого урока на GitHub.
Как мы можем сделать наши графики более динамичными? Возможно мы хотим ограничить доход только х дней; и, кроме того, мы должны иметь возможность изменять этот диапазон «на лету», не требуя перезагрузки страницы. Хорошо, я покажу вам как это сделать!
Просмотрите исходный код этого урока на GitHub.
