DivChart
  • Version: 1.1
  • License: MIT License
  • Author: Sergey Osipov
Download GitHub Donate

Особенности

Простой генератор графиков, диаграмм на 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
  • Объект строк графика с параметрами названий, цвета и значений
Donate
Если вам понравился материал или был полезен, Вы можете поддержать авторские продукты и новые проекты!