Построение графиков на javascript. Как создать интерактивный график, используя CSS3 и jQuery. Ограничения: Бар, Линия

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

Создание линейных диаграмм

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

Chart.js позволяет создавать линейные диаграммы, если задать type как line . Вот пример:

Var lineChart = new Chart(speedCanvas, { type: "line", data: speedData, options: chartOptions });

Теперь мы предоставим данные, а также параметры конфигурации, которые нам нужны для построения линейной диаграммы.

Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , }] }; var chartOptions = { legend: { display: true, position: "top", labels: { boxWidth: 80, fontColor: "black" } } };

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

Цвет области под кривой определяется ключом backgroundColor . Все линейные диаграммы, построенные с использованием этого метода, будут заполнены данным цветом. Вы можете установить значение ключа fill (заливка) равным false , если вы хотите просто нарисовать линию, без заполнения области по дней каким-либо цветом.

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

По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако, вы можете установить значение ключа cubicInterpolationMode в monotone для более точного построения точек, если график, который вы создаете, определяется уравнением y = f (x) . Упругость кривой Безье определяется ключом lineTension . Вы можете установить его значение равным нулю, чтобы нарисовались прямые линии. Обратите внимание, что этот ключ игнорируется, если уже указано значение cubicInterpolationMode .

Вы также можете задать значения цвета границы и её ширины с помощью ключей borderColor и borderWidth . Если вы хотите построить диаграмму, используя пунктирную линию вместо сплошной линии, вы можете использовать ключ borderDash . Он принимает массив в качестве значений, элементы которого определяют длину и промежуток штрихов соответственно.

Появление построенных точек можно контролировать с помощью свойств pointBorderColor , pointBackgroundColor , pointBorderWidth , pointRadius и pointHoverRadius . Существует также ключ pointHitRadius , который определяет расстояние, с которого, точки на графике, начнут взаимодействовать с мышью.

Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , lineTension: 0, fill: false, borderColor: "orange", backgroundColor: "transparent", borderDash: , pointBorderColor: "orange", pointBackgroundColor: "rgba(255,150,0,0.5)", pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" }] };

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

Также вы можете построить несколько линий на одном графике и задать различные параметры, чтобы нарисовать каждый из них следующим образом:

Var dataFirst = { label: "Car A - Speed (mph)", data: , lineTension: 0.3, // Set More Options }; var dataSecond = { label: "Car B - Speed (mph)", data: , // Set More Options }; var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: }; var lineChart = new Chart(speedCanvas, { type: "line", data: speedData });

Создание столбчатых диаграмм

Столбчатые диаграммы (или гистограммы) полезны, когда вы хотите сравнить одно измерение для разных объектов - например, количество автомобилей, продаваемых разными компаниями, или количество людей определенной возрастной группы в городе. Вы можете создать столбчатые диаграммы в Chart.js, установив ключ type в bar . По умолчанию это создаст диаграммы с вертикальными столбцами. Если вы хотите создать диаграммы с горизонтальными столбцами, вы должны установить type как horizontalBar .

Var barChart = new Chart(densityCanvas, { type: "bar", data: densityData, options: chartOptions });

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

Var densityData = { label: "Density of Planets (kg/m3)", data: }; var barChart = new Chart(densityCanvas, { type: "bar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: } });

Параметры, приведенные выше, создадут следующую диаграмму:

Так же как в линейных диаграммах, полосы заполнены светло-серым цветом. Вы можете изменить цвет полос, используя ключ backgroundColor . Аналогично, цвет и ширина границ разных полос могут быть заданы с помощью ключей borderColor и borderWidth .

Если вы хотите, чтобы библиотека не рисовала границы для определенной стороны, вы можете указать сторону в качестве значения для ключа borderSkipped . Вы можете установить следующие значение: top , left , bottom или right . Также вы можете изменить границы и цвет фона различных полос, которые вы увидите при наведении на них курсора мыши, с помощью hoverBorderColor и hoverBackgroundColor .

Размер столбцов в столбчатой диаграммы выше был вычислен автоматически. Однако вы можете контролировать ширину отдельных столбцов, используя свойства barThickness и barPercentage . Ключ barThickness используется для настройки толщины столбцов в пикселях, а barPercentage используется для настройки толщины в процентах от доступной ширины группы.

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

Var densityData = { label: "Density of Planets (kg/m3)", data: , backgroundColor: [ "rgba(0, 99, 132, 0.6)", "rgba(30, 99, 132, 0.6)", "rgba(60, 99, 132, 0.6)", "rgba(90, 99, 132, 0.6)", "rgba(120, 99, 132, 0.6)", "rgba(150, 99, 132, 0.6)", "rgba(180, 99, 132, 0.6)", "rgba(210, 99, 132, 0.6)", "rgba(240, 99, 132, 0.6)" ], borderColor: [ "rgba(0, 99, 132, 1)", "rgba(30, 99, 132, 1)", "rgba(60, 99, 132, 1)", "rgba(90, 99, 132, 1)", "rgba(120, 99, 132, 1)", "rgba(150, 99, 132, 1)", "rgba(180, 99, 132, 1)", "rgba(210, 99, 132, 1)", "rgba(240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 }; var chartOptions = { scales: { yAxes: [{ barPercentage: 0.5 }] }, elements: { rectangle: { borderSkipped: "left", } } }; var barChart = new Chart(densityCanvas, { type: "horizontalBar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: , }, options: chartOptions });

Объект densityData используется для установки границ и фонового цвета столбцов. В приведенном выше коде стоит обратить внимание на две вещи. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity .

Во-вторых, на этот раз type диаграммы установлен в значение horizontalBar . Что также означает, что вам придется изменить значение barThickness и barPercentage для оси Y вместо оси X, чтобы эти значения имели хоть какой-либо эффект на столбцах.

Приведенные выше параметры создадут следующую гистограмму.

Вы также можете сделать графики из несколько наборов данных на одной и той же диаграмме, присвоив id (идентификатор) определенной оси конкретному набору данных. Ключ xAxisID используется для присвоения id любой оси X вашего набора данных. Аналогично, ключ yAxisID используется для присвоения идентификатора любой оси вашего набора данных. Обе оси также имеют ключ id , который вы можете использовать для назначения им уникальных идентификаторов.

Если последний абзац был немного запутанным, следующий пример поможет прояснить ситуацию.

Var densityData = { label: "Density of Planet (kg/m3)", data: , backgroundColor: "rgba(0, 99, 132, 0.6)", borderColor: "rgba(0, 99, 132, 1)", yAxisID: "y-axis-density" }; var gravityData = { label: "Gravity of Planet (m/s2)", data: , backgroundColor: "rgba(99, 132, 0, 0.6)", borderColor: "rgba(99, 132, 0, 1)", yAxisID: "y-axis-gravity" }; var planetData = { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: }; var chartOptions = { scales: { xAxes: [{ barPercentage: 1, categoryPercentage: 0.6 }], yAxes: [{ id: "y-axis-density" }, { id: "y-axis-gravity" }] } }; var barChart = new Chart(densityCanvas, { type: "bar", data: planetData, options: chartOptions });

Здесь мы создали две оси Y с уникальными идентификаторами и они были назначены на отдельные наборы данных, используя ключ yAxisID . Ключи barPercentage и categoryPercentage используются, чтобы сгруппировать столбцы для отдельных планет. Настраиваем categoryPercentage на более низкое значение, чтобы увеличить расстояние между столбцами разных планет. Аналогичным образом, установив barPercentage на более высокое значение, мы уменьшим расстояние между столбцами одной и той же планеты.

На последок

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

Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, сообщите о них в комментариях.

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

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

Почему AnyChart

AnyChart - коммерческая библиотека, она бесплатна для любого некоммерческого использования. Очень хорошо зарекомендовала себя и находится на рынке уже более 10 лет. Первоначально использовался Flash-based AnyChart, но потом перешел на чистый JavaScript с SVG / VML-рендерингом.

API AnyChart очень гибкий и позволяет изменять практически любой аспект диаграммы «на лету» во время выполнения.

AnyChart - семейство продуктов

• AnyChart - предназначен для создания интерактивных графиков всех основных типов
• AnyStock - предназначен для визуализации больших наборов данных на основе даты / времени
• AnyMap - для карт географии и мест
• AnyGantt - для решений по управлению проектами и ресурсами (Gantt, ресурс, диаграммы PERT)

Однако эти библиотеки можно рассматривать как одну большую библиотеку диаграмм JavaScript (HTML5). Все они имеют один и тот же API, все диаграммы сконфигурированы практически одинаково, они имеют общие темы, настройки и способы загрузки данных.

Быстрый запуск с AnyChart

Чтобы начать использовать AnyChart на вашей HTML-странице, вам нужно сделать всего три простых вещи. Первые два включают ссылку на файл JavaScript библиотеки и предоставление элемента HTML на уровне блока.

Вот образец HTML-шаблона, который вы можете использовать:

html, body, #container { width: 100%; height: 100%; } AnyChart Basic Example // AnyChart code here

Третий - это добавление кода JavaScript, который создает простую интерактивную диаграмму столбцов одной серии:

Anychart.onDocumentLoad(function() { // create chart and set data var chart = anychart.column([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall", 10] ]); // set chart title chart.title("AnyChart Basic Sample"); // set chart container and draw chart.container("container").draw(); });

И это все! Вот что у нас получилось.

Легко, правда? Но все становится проще и гибче в AnyChart, когда дело доходит до установки данных. Перейдем к следующему разделу, чтобы более подробно рассмотреть это.

Получение данных в AnyChart

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

Данные из массива

Фактически, вы уже видели первый способ в разделе «Быстрый старт с AnyChart» выше. Используя этот метод, вы объявляете свои данные в виде массива массивов, а AnyChart делает все остальное. Этот метод является кратким, а также простым в форматировании и использовании.

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Arrays var chart = anychart.pie([ ["Peter", 5], ["John", 7], ["James", 9], ["Jacob", 12] ]); chart.title("AnyChart: Array of Arrays"); chart.container("container").draw(); });

Массив объектов

Второй способ очень похож на первый - установка данных в виде массива объектов. Фактически, он менее компактен, но все еще очень прост в форматировании, чтении и понимании. Кроме того, этот формат позволяет вам настраивать отдельные точки из ваших данных, которые также могут обрабатываться другими способами, но только с дополнительными сопоставлениями.

Примечание : когда вы используете данные в объектах в подобной ситуации, используйте соответствующие имена для полей аргументов и значений. Об этом вы можете найти в документации AnyChart для каждого типа диаграммы. В большинстве случаев аргумент равен x, и значение обычно помещается в поле значения.

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Objects // the biggest point is marked with individually conigured marker var chart = anychart.line([ {x: "Winter", value: 5}, {x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}}, {x: "Summer", value: 7}, {x: "Fall", value: 1} ]); chart.title("AnyChart: Array of Objects"); chart.container("container").draw(); });

Создание диаграмм нескольких рядов

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

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Arrays var chart = anychart.line() chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"], rows:[ ["Winter", 5, 7, 4], ["Spring", 7, 9, 6], ["Summer", 9, 12, 8], ["Fall", 12, 15, 9] ]}); chart.title("AnyChart: Multi-Series Array of Arrays"); chart.legend(true); chart.container("container").draw(); });

Несколько рядов: массив объектов

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

Примечание . При использовании таких объектов вы можете применять любые имена полей для значений.

Вот как это можно сделать:

Anychart.onDocumentLoad(function() { // create chart and set data // as Array of Objects var chart = anychart.column(); chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"], rows:[ {x: "Winter", usd: 5, eur: 4, pound: 3}, {x: "Spring", usd: 3, eur: 3, pound: 3}, {x: "Summer", usd: 2, eur: 5, pound: 3}, {x: "Fall", usd: 4, eur: 2, pound: 3} ]}); chart.title("Array of Objects"); chart.legend(true); chart.container("container").draw(); });

Отображение данных из таблицы HTML

Другой способ загрузки данных в AnyChart - использовать таблицу, которая уже существует на странице. Это может быть чрезвычайно эффективным способом визуализации ключевых точек другого скучного списка цифр. Чтобы сделать эту работу, вам нужно будет добавить сценарий адаптера данных вместе с библиотекой диаграмм.

Затем есть два варианта: вы можете извлекать данные из таблиц, созданных с тегом

, или с тегами и CSS. Давайте посмотрим на обоих.

Тег таблицы
Если вы решите реализовать параметр тега таблицы, ваш код может выглядеть так:

Со следующим JavaScript:

Anychart.onDocumentLoad(function() { // create chart and set data var chart = anychart.column(); // parse table var tableData = anychart.data.parseHtmlTable("#htmlTable"); chart.data(tableData); chart.legend(true); // set chart container and draw chart.container("container").draw(); });

И вот на что это похоже на практике.

Отображаемые данные с использованием обычной разметки

Теперь давайте посмотрим, как это работает при создании таблицы с тегами и CSS:

... ...

Со следующим JavaScript:

Anychart.onDocumentLoad(function() { // create a chart and set the data var chart = anychart.column(); var tableData = anychart.data.parseHtmlTable(".table", ".row", ".cell p", ".heading .cell p", ".title"); chart.data(tableData); chart.legend(true); // set chart container and draw chart.container("container").draw(); });

Вы видите, что можно установить селектора CSS для строк, заголовков и заголовков таблицы. В принципе, вам не нужно настраивать саму таблицу - вы можете настроить сценарий и получить данные из разметки.

Работа с данными JSON

В диаграммах AnyChart нет проблем с обработкой данных в чистом формате JSON. Фактически AnyChart работает так хорошо с JSON, что даже предоставляет свои собственные схемы JSON. JSON - отличный формат данных, если, например, вы хотите сохранить настройки и данные вместе. AnyChart также имеет ряд методов сериализации JSON, которые могут помочь в экспорте.

Таким образом, вы создадите диаграмму комбинаций столбцов и сплайнов из данных JSON. В этом (и следующих примерах) требуется сценарий адаптера данных, упомянутый ранее.

Anychart.onDocumentReady(function() { // JSON data var json = { "chart": { "type": "column", "title": "AnyChart: Data from JSON", "series": [{ "seriesType": "Spline", "data": [ {"x": "P1", "value": "128.14"}, {"x": "P2", "value": "112.61"}, {"x": "P3", "value": "163.21"}, {"x": "P4", "value": "229.98"}, {"x": "P5", "value": "90.54"} ] }, { "seriesType": "Column", "data": [ {"x": "P1", "value": "90.54"}, {"x": "P2", "value": "104.19"}, {"x": "P3", "value": "150.67"}, {"x": "P4", "value": "120.43"}, {"x": "P5", "value": "200.34"} ] }], "container": "container" } }; // set JSON data chart = anychart.fromJson(json); // draw chart chart.draw(); });

Работа с данными XML

И если вам не нравится JSON, вы можете придерживаться XML, поскольку диаграммы AnyChart также не имеют проблем с данными в формате XML. Как и в JSON, AnyChart также предоставляет свои собственные XML-схемы. XML также хорошо подходит, когда вы собираетесь хранить настройки и данные в целом. И снова, AnyChart имеет ряд методов сериализации XML, которые могут быть полезны при экспорте.

Вот пример кода полярной диаграммы с несколькими сериями, созданной из настроек XML:

Anychart.onDocumentReady(function() { // XML settings and data var xml = "" + "" + "" + ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""; // Set settings and data as XML chart = anychart.fromXml(xml); // draw chart chart.draw(); });

Работа с данными в формате CSV

Последнее, что я хотел бы продемонстрировать - это то, как вы можете работать с данными, хранящимися в формате CSV. AnyChart поддерживает это из коробки, с некоторыми дополнительными параметрами конфигурации (например, что используется в качестве разделителя). CSV является широко известным и часто используемым форматом. Он хорош для больших наборов данных и обеспечивает возможность экономии полосы пропускания. Вы можете загружать данные из CSV (как показано ниже), отображать их и затем внедрять в свои диаграммы.

Самый простой способ загрузить CSV-файл в диаграмму JS AnyChart - это если файл фактически разделен запятой, содержит аргумент в первом столбце и не имеет заголовка, то есть выглядит примерно так:

Eyeshadows,249980 Eyeliner,213210 Eyebrow pencil,170670 Nail polish,143760 Pomade,128000 Lip gloss,110430 Mascara,102610 Foundation,94190 Rouge,80540 Powder,53540

Anychart.onDocumentReady(function () { anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) { // create chart from loaded data chart = anychart.bar(data); // set title chart.title("AnyChart from CSV File"); // draw chart chart.container("container").draw(); }); });

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

Вывод

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

Все материалы вы можете найти в исходнике

Здравствуйте, уважаемые читатели a! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js . Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует . В качестве примера использования chart.js рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.

Подключение

Первое, что нужно сделать, это загрузить Chart.js . Остается только подключить его к странице. Допустим файлы html и js находятся в одном каталоге, тогда в общем виде разметка страницы выглядит так:

1 2 3 4 5 6 7 8 9 10

Chart.js демо

Как Вы наверняка заметили подключение библиотеки jQuery не обязательно, однако если она необходима для иных целей можно смело подключать, конфликтов возникнуть не должно.

Использование Рисуем график

Чтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:

Задаем размеры элемента и указываем идентификатор.

1 2 3 4 5 6 7 8 9 10 11 12 13

var buyers = document.getElementById ("buyers" ) .getContext ("2d" ) ; var buyerData = { labels : [ "Январь" , "Февраль" , "Март" , "Апрель" , "Май" , "Июнь" ] , datasets : [ { fillColor : "rgba(172,194,132,0.4)" , strokeColor : "#ACC26D" , pointColor : "#fff" , pointStrokeColor : "#9DB86D" , data : [ 200 , 155 , 100 , 250 , 305 , 250 ] } ] }

С помощью класса Chart определяем линейную диаграмму.

Теперь задаем параметры и данные для отображения:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var countries= document.getElementById ("countries" ) .getContext ("2d" ) ; var pieData = [ { value: 20 , color: "#878BB6" } , { value : 40 , color : "#4ACAB4" } , { value : 10 , color : "#FF8153" } , { value : 30 , color : "#FFEA88" } ] ;

Для более «точечной» настройки также можно использовать опции.

Краткий обзор javascript библиотек для построения графиков

Highcharts

Highcharts - библиотека для построения графиков, написанная на чистом HTML5/JavaScript, предлагает интуитивно понятные интерактивные диаграммы для вашего веб-сайта или веб-приложения. Highcharts в настоящее время поддерживает line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall и полярные типы диаграмм.

Google Charts

Google Charts -предлагает разнообразные графики, предназначенных для решения визуализации данных. Эти диаграммы основаны на чистом HTML5/SVG технологии (принимающей VML для старых версий IE), так что никаких плагинов не требуется. Все они являются интерактивными, и многие из них pannable и масштабируемой. Добавление этих диаграмм на страницу может быть сделано в несколько простых шагов.

CanvasJS

CanvasJS - простая в использовании HTML5 и JavaScript библиотека Charting , построенная на элементе Canvas . Графики могут отображаться на различных устройствах, включая мобильные устройства, Ipad, Android, Windows Phone, Microsoft Surface, на настольных компьютерах и т.д. Это позволяет создавать функционяльный графики, которые работают на всех устройствах без ущерба для удобства обслуживания или функциональности вашего веб-приложения. CanvasJS поставляется с красивыми темами и загружается в 10 раз быстрее, чем обычные флэш и SVG График - в результате чего графики легкие и красивые.

Chart JS

Chart JS - Легкая, объектно-ориентированная библиотека для построения графики на стороне клиента.

RGraph

RGraph - это библиотека на основе canvas HTML5 и библиотеки JavaScript, для построения веб-диаграмм с поддержкой более двадцати различных типов визуализации. RGraph создает HTML5 диаграммы внутри веб-браузера с помощью JavaScript и тега canvas .

В этой статье мы будем создавать интерактивный график, используя CSS3 и jQuery . Мы будем использовать популярную библиотеку для jQuery - Flot. Flot – это библиотека (на чистом javascript), предназначенная для рисования графиков, и используемая в jQuery. Этот плагин прост, но в то же время достаточно мощен, чтобы создавать красивые и интерактивные графики. Для большей информации о библиотеке обратитесь к официальной документации по flot.

Разметка HTML

Для начала создадим разметку HTML для графика. Создадим блок с классом graph-wrapper . Внутри этого блока расположим два блока. Первый блок с классом graph-info , будет содержать легенду графиков и кнопки для переключения между внешним видом графиков. Второй блок содержит графики (линейный и столбиковый).

HTML Visitors Returning Visitors jQuery и библиотека Flot

Давайте подключим javascript. Сперва подключим библиотеку jquery (например, от google). Вы можете использовать ту же ссылку или загрузить файл c библиотекой jQuery на ваш сервер. Затем загрузите файлы Flot и подключите jquery.flot.min.js.

HTML $(document).ready(function () { // Graph scripts here }); Данные для графика

Данные для графика представляют собой массив вида: . Мы также установим пользовательские опции для каждого типа данных.

jQuery var graphData = [{ // Visits data: [ , , , , , , , , , ], color: "#71c73e" }, { // Returning Visits data: [ , , , , , , , , , ], color: "#77b7c5", points: { radius: 4, fillColor: "#77b7c5" } } ]; Загружаем графики

Сейчас мы будем загружать два графика, один линейный, другой столбиковый. Оба имеют несколько пользовательских параметров (цвет, тень и т.д.). Также оба используют данные из переменной graphData .

jQuery // Линейный $.plot($("#graph-lines"), graphData, { series: { points: { show: true, radius: 5 }, lines: { show: true }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); // Bars $.plot($("#graph-bars"), graphData, { series: { bars: { show: true, barWidth: .9, align: "center" }, shadowSize: 0 }, grid: { color: "#646464", borderColor: "transparent", borderWidth: 20, hoverable: true }, xaxis: { tickColor: "transparent", tickDecimals: 2 }, yaxis: { tickSize: 1000 } }); Стили для блока-обертки и его потомков

Предварительно сбросим стили по умолчанию для всех элементов в блоке-родителе графиков (хорошая практика начинать верстку сайта с подключений сброса стилей).

CSS /* Resets */ .graph-container, .graph-container div, .graph-container a, .graph-container span { margin: 0; padding: 0; } Добавим градиент и закругленные углы обертке, кнопкам и подсказкам. CSS /* Gradinet and Rounded Corners */ .graph-container, #tooltip, .graph-info a { background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9)); background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%); background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

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

CSS /* Graph Container */ .graph-container { position: relative; width: 550px; height: 300px; padding: 20px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1); box-shadow: 0px 1px 2px rgba(0,0,0,.1); } .graph-container > div { position: absolute; width: inherit; height: inherit; top: 10px; left: 25px; } .graph-info { width: 590px; margin-bottom: 10px; }

Легенда и кнопки

Давайте начнем с добавления базовых стилей для ссылок. Для легенд графиков создадим небольшой круг с таким же цветом как у самих графиков (линейный/столбиковый). Чтобы создать круг будем использовать псевдо-селектор:before . Этот селектор позволит нам вставить контент до содержимого элемента, к которому он добавляется.

CSS .graph-info a { position: relative; display: inline-block; float: left; height: 20px; padding: 7px 10px 5px 30px; margin-right: 10px; text-decoration: none; cursor: default; } CSS /* Color Circles */ .graph-info a:before { position: absolute; display: block; content: ""; width: 8px; height: 8px; top: 13px; left: 13px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .graph-info .visitors { border-bottom: 2px solid #71c73e; } .graph-info .returning { border-bottom: 2px solid #77b7c5; } .graph-info .visitors:before { background: #71c73e; } .graph-info .returning:before { background: #77b7c5; }

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

Наконец предотвратим схлопывание блоков.

CSS /* Clear Floats */ .graph-info:before, .graph-info:after, .graph-container:before, .graph-container:after { content: ""; display: block; clear: both; } Переключатель графиков

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

jQuery $("#graph-bars").hide(); $("#lines").on("click", function (e) { $("#bars").removeClass("active"); $("#graph-bars").fadeOut(); $(this).addClass("active"); $("#graph-lines").fadeIn(); e.preventDefault(); }); $("#bars").on("click", function (e) { $("#lines").removeClass("active"); $("#graph-lines").fadeOut(); $(this).addClass("active"); $("#graph-bars").fadeIn().removeClass("hidden"); e.preventDefault(); }); Текст

Добавляем шрифт и стили для текста.

CSS #tooltip, .graph-info a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 12px; line-height: 20px; color: #646464; } .tickLabel { font-weight: bold; font-size: 12px; color: #666; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

Спрячем стили для первого и последнего значения по оси y:

CSS .yAxis .tickLabel:first-child, .yAxis .tickLabel:last-child { display: none; } Подсказка

Добавим подсказку внутрь элемента body. Подсказка будет блоком с id равным tooltip . Позиция для подсказки будет вычисляться на основе позиции точек графика. Подсказка будет показываться лишь при наведении курсора на точки графиков.

jQuery function showTooltip(x, y, contents) { $("" + contents + "").css({ top: y - 16, left: x + 20 }).appendTo("body").fadeIn(); } var previousPoint = null; $("#graph-lines, #graph-bars").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint, y = item.datapoint; showTooltip(item.pageX, item.pageY, y + " visitors at " + x + ".00h"); } } else { $("#tooltip").remove(); previousPoint = null; } });

Затем добавим подсказке абсолютное позиционирование, отступы, границы и установим display в none .

CSS #tooltip { position: absolute; display: none; padding: 5px 10px; border: 1px solid #e1e1e1; }

Заключение

На этом все. Мы закончили, используя CSS3 и плагин flot, настраивать графики. Успехов.