Простой генератор графиков, диаграмм на JavaScript с выводом в html блоки для сайта. Многомерные данные, адаптивный дизайн, светлая и тёмная тема оформления.
Особенности
Простой генератор графиков, диаграмм на JavaScript с выводом в html блоки для сайта.
- Вывод в html блоки
- Адаптивный дизайн
- Цветовая тема: Light | Dark
Использование
Подключаем JavaScript файл и стили CSS. В дистрибутиве есть как исходники, так и минифицированые файлы. В проекте нужно указать свои пути к ним:
<link href="/css/divchart.min.css" rel="stylesheet" type="text/css"/>
<script src="/js/divchart.min.js" type="text/javascript"></script>Создаём новый объект DivChart с нужными параметрами и для генерации вызываем метод create:
let chart = new DivChart({
/* example options */
selector: '#chart',
theme: 'dark',
title: 'Example Chart',
description: 'Description for example chart',
unit: 'Score',
better: 'Better ->',
type: 'number',
separate: false,
labels: true,
grid_wmax: 100,
grid_part: 5,
points: [
{
title: 'Combined',
color: '#e76100'
}
],
graphs: [
{
label: 'Simple object',
color: [
'#e76100'
],
value: [
78
]
},
]
});
chart.create();Примеры
Строим график по результатам теста 3DMark. Строки по позициям слиты в одну с параметром separate по умолчанию равным false, максимальный диапазон единиц сетки grid_wmax установлен в 10000, в параметре grid_part сетка делится на 10 частей.
<div id="chart_01"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let color_blue = '#4c8ffc';
let color_green = '#4f9100';
let color_orange = '#e76100';
let chart_01 = new DivChart({
selector: '#chart_01',
title: '3DMark 2.7.6',
description: 'Fire Strike 1920 x 1080 (Radeon RX 470 4GB)',
unit: 'Score',
better: 'Better »',
grid_wmax: 10000,
grid_part: 10,
points: [
{
title: 'Combined',
color: color_blue
},
{
title: 'CPU',
color: color_green
},
{
title: 'Overall',
color: color_orange
}
],
graphs: [
{
label: 'Phenom II X6 1055T',
color: [
color_blue,
color_green,
color_orange
],
value: [
3069,
5999,
8252,
]
},
{
label: 'Xeon E5450',
color: [
color_blue,
color_green,
color_orange
],
value: [
2863,
5120,
7927,
]
},
{
label: 'Core i5-3470',
color: [
color_blue,
color_green,
color_orange
],
value: [
4047,
6489,
9143,
]
}
]
});
chart_01.create();
});
</script>Строим график по результатам теста Blender. Используется параметр данных type с строковым значением time, в данных value по каждой строке графика используется значение времени в строковом формате часы : минуты : секунды (00:00:00), разделителем является двоеточие. Если значения предполагают только минуты с секундами, то значения часа можно упускать, формат данных 12:30 будет восприниматься как 12 минут 30 секунд. Параметр максимального диапазона единиц сетки grid_wmax установлен в 13:00 - 13 минут 00 секунд.
<div id="chart_02"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let color_blue = '#4c8ffc';
let color_red = '#cc0000';
let chart_02 = new DivChart({
selector: '#chart_02',
title: 'Blender 2.79b',
unit: 'Time Min:Sec',
better: '« Better',
grid_wmax: '13:00',
type: 'time',
points: [
{
title: 'Samples 150',
color: color_blue
},
{
title: 'Samples 600',
color: color_red
}
],
graphs: [
{
label: 'Phenom II X6 1055T',
color: [
color_blue,
color_red
],
value: [
'02:19',
'09:09'
]
},
{
label: 'Xeon E5450',
color: [
color_blue,
color_red
],
value: [
'03:07',
'12:22'
]
},
{
label: 'Core i5-3470',
color: [
color_blue,
color_red
],
value: [
'01:28',
'05:48'
]
}
]
});
chart_02.create();
});
</script>Строим график по результатам теста Cinebench. Разделим строки графиков на отдельные части параметром separate с значением true. Отключаем показ подписей у позиций строк графиков параметром labels с значением false. В объекте points присваиваем значения имени и цвета для каждой строки графика.
<div id="chart_03"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let color_sc_1 = '#ff0000';
let color_mt_1 = '#c30000';
let color_sc_2 = '#1461a5';
let color_mt_2 = '#14407a';
let color_sc_3 = '#4c8ffc';
let color_mt_3 = '#3a56b9';
let chart_03 = new DivChart({
selector: '#chart_03',
title: 'Cinebench R15.038',
description: 'Single Core and Multi-Thread score',
unit: 'Score',
better: 'Better »',
labels: false,
separate: true,
points: [
{
title: 'X6 1055T (SC)',
color: color_sc_1
},
{
title: 'X6 1055T (MT)',
color: color_mt_1
},
{
title: 'E5450 (SC)',
color: color_sc_2
},
{
title: 'E5450 (MT)',
color: color_mt_2
},
{
title: 'i5-3470 (SC)',
color: color_sc_3
},
{
title: 'i5-3470 (MT)',
color: color_mt_3
}
],
graphs: [
{
label: 'Phenom II X6 1055T',
color: [
color_sc_1,
color_mt_1
],
value: [
84,
427
]
},
{
label: 'Xeon E5450',
color: [
color_sc_2,
color_mt_2
],
value: [
86,
328
]
},
{
label: 'Core i5-3470',
color: [
color_sc_3,
color_mt_3
],
value: [
132,
481
]
}
]
});
chart_03.create();
});
</script>Строим график по результатам теста V-Ray. В данном случае применяем тёмную тему параметром theme с значением dark. По сути значение dark является строковым наименованием класса CSS на общий блок графика. При желании можно создать свою тему и переопределить нужные значения для любого блока.
<div id="chart_04"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let color_orange = '#e76100';
let chart_04 = new DivChart({
selector: '#chart_04',
theme: 'dark',
title: 'V-Ray Benchmark 1.0.1',
unit: 'Time Min:Sec',
better: '« Better',
grid_wmax: '08:00',
type: 'time',
graphs: [
{
label: 'Phenom II X6 1055T',
color: [
color_orange
],
value: [
'05:36',
]
},
{
label: 'Xeon E5450',
color: [
color_orange
],
value: [
'07:50',
]
},
{
label: 'Core i5-3470',
color: [
color_orange
],
value: [
'05:37',
]
},
]
});
chart_04.create();
});
</script>Параметры
selector
- Type: string
- Default: none
- Строковый параметр CSS селектора блока для вывода, например: '.selector', '#chart'
theme
- Type: string
- Default: light
- Строковый параметр в котором можно указать тему light или dark
title
- Type: string
- Default: none
- Строковый параметр заголовка блока графика
description
- Type: string
- Default: none
- Строковый параметр подписи (комментария) блока графика
unit
- Type: string
- Default: none
- Строковый параметр для объекта единиц измерения графика, например: Метры, Секунды, Цена
better
- Type: string
- Default: none
- Строковый параметр для объекта лучших значений графика, какие значения лучше: большие или меньшие
type
- Type: string
- Default: number
- Строковый параметр типа данных для значений строк графика, number - числовые значения (в том числе и float) или time - время формата 00:00:00
separate
- Type: boolean
- Default: false
- Логический параметр разделения строк графика на отдельные части, true или false
labels
- Type: boolean
- Default: true
- Логический параметр показа меток подписей у позиций строк графика, true или false
grid_wmax
- Type: int
- Default: 0
- Целочисленный параметр максимального диапазона единиц сетки графика
grid_part
- Type: int
- Default: 5
- Целочисленный параметр количества делений сетки графика
points
- Type: object
- Default: none
- Объект пунктов графика с параметрами названий и цвета
graphs
- Type: object
- Default: none
- Объект строк графика с параметрами названий, цвета и значений
