Недавно знакомый дал ссылку на очень неплохую javascript библиотеку для рисования самых разных графиков в канвасе. Называется она Bluff. Ниже немного о ней.
Все графики имеют примерно одинаковый способ инициализации:
По умолчанию, соотношение сторон 4:3. Но высоту можно так же задавать и в ручную:
Текущая версия библиотеки поддерживает следующие виды графиков:
Выше был рассмотрен способ передачи данных через массив, однако Bluff так же позволяет вставлять данные из HTML таблиц. Главное удостовериться в том, что тэг
Как использовать
Все графики имеют примерно одинаковый способ инициализации:
// Создаем объект, указав его id и ширину
var g = new Bluff.Line('example', 400);
// Задаем тему и настройки
g.theme_keynote();
g.title = 'My Graph';
// Передаем данные и названия графиков
g.data('Apples', [1, 2, 3, 4, 4, 3]);
g.data('Oranges', [4, 8, 7, 9, 8, 9]);
g.data('Watermelon', [2, 3, 1, 5, 6, 8]);
g.data('Peaches', [9, 9, 10, 8, 7, 9]);
g.labels = {0: '2003', 2: '2004', 4: '2005'};
// Рендерим
g.draw();По умолчанию, соотношение сторон 4:3. Но высоту можно так же задавать и в ручную:
var g = new Bluff.Line('example', '800x300');Текущая версия библиотеки поддерживает следующие виды графиков:
- Bluff.AccumulatorBar
- Bluff.Area
- Bluff.Bar
- Bluff.Dot
- Bluff.Line
- Bluff.Mini.Bar
- Bluff.Mini.Pie
- Bluff.Mini.SideBar
- Bluff.Net
- Bluff.Pie
- Bluff.SideBar
- Bluff.SideStackedBar
- Bluff.Spider
- Bluff.StackedArea
- Bluff.StackedBar
Данные из HTML
Выше был рассмотрен способ передачи данных через массив, однако Bluff так же позволяет вставлять данные из HTML таблиц. Главное удостовериться в том, что тэг
выставлен верно. Например,
Annual Fruit Sales
Apples
Oranges
Watermelon
Peaches
1
4
2
9
2003
2
8
3
9
3
7
1
10
2004
4
9
5
8
4
8
6
7
2005
3
9
8
9
<table id="data">
<caption>Annual Fruit Sales</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Apples</th>
<th scope="col">Oranges</th>
<th scope="col">Watermelon</th>
<th scope="col">Peaches</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td>1</td> <td>4</td> <td>2</td> <td>9</td>
</tr>
<tr>
<th scope="row">2003</th>
<td>2</td> <td>8</td> <td>3</td> <td>9</td>
</tr>
<tr>
<th scope="row"></th>
<td>3</td> <td>7</td> <td>1</td> <td>10</td>
</tr>
<tr>
<th scope="row">2004</th>
<td>4</td> <td>9</td> <td>5</td> <td>8</td>
</tr>
<tr>
<th scope="row"></th>
<td>4</td> <td>8</td> <td>6</td> <td>7</td>
</tr>
<tr>
<th scope="row">2005</th>
<td>3</td> <td>9</td> <td>8</td> <td>9</td>
</tr>
</tbody>
</table>
<canvas id="graph" width="300" height="225"></canvas>
<script type="text/javascript">
var g = new Bluff.Line('graph', '300x225');
g.theme_odeo();
g.data_from_table('data');
g.draw();
</script>
* This source code was highlighted with Source Code Highlighter.
Темы
Что такое тема это вполне понятно. Тема должна быть выставлена до задания прочих цветовых опций и задания данных. Тему можно как задать самому, так и использовать стандартную. Чтобы задать тему в ручную, необходимо задать значения для colors, marker_color, font_color и выбрать цвет бэкграунда morebackground_colors:
g.set_theme({
colors: ['#202020', 'white', '#a21764', '#8ab438',
'#999999', '#3a5b87', 'black'],
marker_color: '#aea9a9',
font_color: 'black',
background_colors: ['#ff47a4', '#ff1f81']
});
А ниже список доступных тем по умолчанию:
g.theme_keynote();
g.theme_37signals();
g.theme_rails_keynote();
g.theme_odeo();
g.theme_pastel();
g.theme_greyscale();
Всплывающие подсказки
Некоторые из графиков поддерживают использование всплывающих подсказок. Их внешний вид можно задать с помощью css, так как показано ниже:
<div class="bluff-tooltip">
<span class="label">
<span style="color: #abcdef;">•</span>
Data series name
</span>
<span class="data">
42
</span>
</div>
* This source code was highlighted with Source Code Highlighter.
Чтобы включить подсказки задайте следующий параметр g.tooltips = true , когда создаете график. Подсказки работают со следующими типами графиков:
- Bluff.AccumulatorBar
- Bluff.Bar
- Bluff.Line
- Bluff.Mini.Bar
- Bluff.Mini.SideBar
- Bluff.SideBar
- Bluff.SideStackedBar
- Bluff.StackedBar
Вот такая неплохая либа.