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

Недавно знакомый дал ссылку на очень неплохую 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 таблиц. Главное удостовериться в том, что тэг <th> выставлен верно. Например,

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>

Темы

Что такое тема это вполне понятно. Тема должна быть выставлена до задания прочих цветовых опций и задания данных. Тему можно как задать самому, так и использовать стандартную. Чтобы задать тему в ручную, необходимо задать значения для 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;">&bull;</span>
      Data series name
    </span>
    <span class="data">
      42
    </span>
  </div>

Чтобы включить подсказки задайте следующий параметр g.tooltips = true , когда создаете график. Подсказки работают со следующими типами графиков:

• Bluff.AccumulatorBar
• Bluff.Bar
• Bluff.Line
• Bluff.Mini.Bar
• Bluff.Mini.SideBar
• Bluff.SideBar
• Bluff.SideStackedBar
• Bluff.StackedBar

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

Related Posts by Categories