Pull to refresh
0

Создание графиков с JavaScript

Reading time 2 min
Views 6.7K
imageС началом существования HTML 5 возможности веб-приложений в браузерах возросли фантастически. Один из примеров – canvas элемент, который позволяет, с помощью JavaScript, рисовать 2D и 3D модели, равно как и растровую графику (bitmaps).

Благодаря этим возможностям, статистические графики могут быть нарисованы прямо в браузере. Типы графиков могут быть различными. В прошлом, чтобы изобразить график, использовались различные подходы. Если внешний вид графика позволял, использовался стандартный HTML и CSS. Однако, подходы для более сложных графиков использовали различные технологии встроенных в браузеры HTML, CSS и JavaScript. Популярным было использование Flash, или графики вычерчивались на сервере, с последующей передачей их изображения клиенту. Эти подходы требовали много времени для поддержки, нарушали консистенцию приложений, вынуждали клиента устанавливать дополнительное ПО и дополнительно нагружали сервера.

Основным же недостатком при использовании canvas и JavaScript являются различная поддержка [1] браузерами и полное отсутствие поддержки в старых версиях.

При реализации графиков очень важен этап передачи статистических данных. Одним из возможных сценариев является прямое получение JS-файла с сервера, который содержит массивы со статистическими данными. Такой подход был бы абсолютно достаточен, если бы эти данные использовались бы только JavaScript –приложениями.

Но, когда данные требуют независимости от конкретного приложения, необходимо использовать другой подход. В нашем случае мы используем JSON[2]. JSON прост для понимания JavaScript-ом, а так же его синтаксис позволяет легко реализовать полный парсер.

image
Source github


В JavaScript есть встроенный парсер для JSON. В ECMA-262-5-стандарт был включен JSON.parse, который имплементирован в последнии версии браузеров. В старых версиях браузеров можно использовать json[3] от Douglas Crockford. Вопреки тому, что парсер от Douglas Crockford не полностью совместим с JSON.parse в ECMA-262-5, он достаточно надежен в отличие от прямого използования eval.

После того как данные обработаны и готовы для использования приложением, следует вычерчивание графика. В этом случае подходы различаются согласно типу графика. В нашем случае мы будем рисовать график со столбцами. Мы будем использовать API для текста для canvas, и также, нарисуем легенду к графику.

image

Эти графики мы используем в WebSitePulse Current Status расширение для Google Chrome. Add-on позволяет мониторить ваши сервера в процессе использования вашего любимого браузера. Статистический график будет показывать вам стабильность в определенный период времени.

Вы можете попробывать WebSitePulse Current Status с следующими настройками:
Username: wspdemo
API Key: 35e6340814655582a79039dbc1cb0b65


  1. Поддержка canvas в браузерах — caniuse.com/#search=canvas
  2. JavaScript Object Notation — www.json.org
  3. json — github.com/douglascrockford/JSON-js/blob/master/json.js
Tags:
Hubs:
+2
Comments 1
Comments Comments 1

Articles

Information

Website
www.websitepulse.com
Registered
Founded
2000
Employees
11–30 employees
Location
США