JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

* Определить визуальное оформление диаграмм средствами CSS можно так:

* .sparkline { background-color: #ddd; color: red; }

*

* - Цвет кривой графика определяется CSS-свойством color вычисленного стиля.

* - Сами диаграммы являются прозрачными, поэтому сквозь них просвечивает фон страницы.

* -

Высота диаграммы определяется атрибутом data-height, если он указан,

* или свойством font-size вычисленного стиля в противном случае.

* - Ширина диаграммы определяется атрибутом data-width, если он указан,

* или числом точек данных, умноженным на значение атрибута data-dx, если он

* указан, или числом точек данных, умноженным на высоту, деленную на 6

* - Минимальное и максимальное значение по оси у извлекаются из атрибутов

* data-ymin и data-ymax, если они указаны, иначе отыскиваются минимальное

* и максимальное значение в данных.

*/

onLoad(function { // Когда документ будет загружен

//Отыскать все элементы с классом "sparkline"

var elts = document.getElementsByClassName("sparkline");

main: for(var e = 0; e < elts.length: e++) { // Для каждого элемента

var elt = elts[e];

// Получить содержимое элемента и преобразовать его в массив чисел.

// Если преобразование не удалось, пропустить этот элемент.

var content = elt.textContent || elt.innerText; // Содержимое

var content = content.replace(/~\s+|\s+$/g, // Удалить пробелы

var text = content.replace(/#.*$/gm, // Удалить комментарии

text = text.replace(/[\n\r\t\v\f]/g, " ");// Преобр. \n и др. в пробел

var data = text.split(/\s+|\s*,\s*/); // По пробелам и запятым

for(var і = 0; і < data.length; і++) { // Каждый фрагмент

data[i] = Number(data[і]); // Преобразовать в число

if (isNaN(data[і])) continue main; // Прервать при неудаче

}

//

Определить цвет, ширину, высоту и границы по оси у для диаграммы

// из данных, из атрибутов data- элемента и из вычисленного стиля,

var style = getComputedStyle(elt, null);

var color = style.color:

var height = parselnt(elt.getAttributefdata-height")) ||

parseInt(style.fontSize) || 20;

var width = parseInt(elt.getAttribute("data-width")) ||

data.length * (parseInt(elt.getAttribute("data-dx")) || height/6);

var ymin = parselnt(elt.getAttribute("data-ymin")) ||

Math.min.apply(Math, data);

var ymax = parseInt(elt.getAttribute("data-ymax")) || Math.max.apply(Math, data);

if (ymin >= ymax) ymax = ymin + 1;

// Создать элемент <canvas>.

var canvas = document.createElement("canvas”);

canvas.width = width; // Установить размеры холста

canvas.height = height;

canvas.title = content; // Содержимое использовать как подсказку

elt.innerHTML = "" ;// Стереть содержимое элемента

elt.appendChild(canvas); // Вставить холст в элемент

// Нарисовать график по точкам (і,data[і]), преобразовав в координаты холста,

var context = canvas.getContext('2d');

for(var і = 0; і < data.length; i++) { // Для каждой точки на графике

var х = width*i/data.length; // Масштабировать і

var у = (ymax-data[i])*height/(ymax-ymin); // и data[i]

context.1іnеТо(х,у); // Первый вызов lineТо выполнит moveTo

}

context.strokeStyle = color; // Указать цвет кривой на диаграмме