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

Как использовать

Все графики имеют примерно одинаковый способ инициализации:

// Создаем объект, указав его 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


Вот такая неплохая либа.

Bluff — библиотека для рисования графиков в канвасе