Skip to main content

Кругова діаграма

Навігація

Кругова діаграма

Techno4 поставляється з простим компонентом секторної діаграми. Він створює гарні повністю адаптивні діаграми SVG.

Макет кругової діаграми

Оскільки кругова діаграма SVG генерується JavaScript, її макет HTML максимально простий:
<!—Елемент кругової діаграми -->
<div class="pie-chart"></div>

Методи застосунку кругової діаграми

Тепер нам потрібно створити/ініціалізувати секторну діаграму. Давайте розглянемо пов’язані методи роботи з застосунком:
МетодОписТип
app.pieChart.create(parameters)
створити екземпляр кругової діаграми
  • parameters - object. — Об'єкт з параметрами кругової діаграми
object
app.pieChart.destroy(el)
знищити екземпляр секторної діаграми
  • el - HTMLElement or string — (with CSS Selector) or object. Елемент секторної діаграми або екземпляр секторної діаграми для знищення.
HTMLElement
app.pieChart.get(el)
отримати екземпляр секторної діаграми за елементом HTML
  • el - HTMLElement or string — (with CSS Selector). Елемент секторної діаграми.
HTMLElement
app.pieChart.update(parameters)
оновити/повторно відтворити кругову діаграму SVG відповідно до переданих даних
  • parameters -object — Об’єкт із параметрами секторної діаграми
object

Параметри кругової діаграми

Тепер давайте подивимося на список доступних параметрів, необхідних для створення кругової діаграми:
ПараметрОписТип
el
Елемент секторної діаграми. HTMLElement або рядок із CSS-селектором елемента кругової діаграми. Згенерований SVG буде вставлено в цей елемент
string
ПараметрЗа замовчуваннямОписТип
datasets
[]
Набори даних діаграм. Кожен об’єкт у datasets масиві має такі властивості:
array
 
/** Dataset value */
value: number;
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
ПараметрЗа замовчуваннямОписТип
size
320
Розмір створеного зображення SVG (у пікселях)
number
tooltip
false
Вмикає спливаючу підказку при наведенні
boolean
formatTooltip
Спеціальна функція візуалізації, яка має повертати HTML-вміст спливаючої підказки. Отриманий data об'єкт має такі властивості:

index: number;

value: number;

label: string;

color: string;

percentage: number;

function
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var pieChart = app.pieChart.create({
  el: '.pie-chart',
  on: {
    beforeDestroy: function () {
      console.log('Pie Chart will be destroyed')
    }
  }
})

Методи та властивості кругової діаграми

Отже, щоб створити секторну діаграму, ми повинні викликати:
var pieChart = app.pieChart.create({ /* parameters */ })
Після цього у нас є її ініціалізований екземпляр (як pieChart змінна у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість ОписТип
pieChart.app
Посилання на глобальний екземпляр застосунку
object
pieChart.el
HTML-елемент секторної діаграми
HTMLElement
pieChart.$el
Екземпляр Dom64 з елементом HTML кругової діаграми
HTMLElement
pieChart.svgEl
HTML-елемент SVG, створений секторною діаграмою
HTMLElement
pieChart.$svgEl
Екземпляр Dom64 із згенерованим елементом SVG HTML
HTMLElement
pieChart.params
Параметри кругової діаграми
object
Методи
МетодОпис
pieChart.update(parameters)
Оновити/повторно відобразити елемент SVG секторної діаграми відповідно до переданих параметрів. Він приймає об’єкт із тими самими параметрами, що необхідні для ініціалізації секторної діаграми. Ви можете передавати лише параметри, які потрібно оновити, наприклад:
 
var pieChart = app.pieChart.create({
  datasets: datasetsA,
  // ...
});

// нам потрібно оновити відтворений SVG на основі нових наборів даних:
pieChart.update({
  datasets: datasetsB,
});
МетодОписТип
pieChart.destroy()
Знищує екземпляр секторної діаграми
function
pieChart.on(vent, handler)
Додати обробник подій
object
pieChart.once(event, handler)
Додайте обробник подій, який буде видалено після запуску
Event
pieChart.off(event, handler)
Видалити обробник подій
Event
pieChart.off(event)
Видалити всі обробники для вказаної події
Event
pieChart.emit(event, ...args)
Запустити подію на екземплрі
Event

Події кругової діаграми

Секторна діаграма запускатиме такі події DOM в елементі Секторної діаграми та події в застосунку та екземплярі Секторної діаграми:

Події DOM

ПодіяОб'єктОписТип
piechart:select
Елемент секторної діаграми

<div class="pie-chart">

Подія буде ініційована (якщо спливаючу підказку ввімкнено) при наведенні курсора на діаграму
HTMLElement
piechart:beforedestroy
Елемент секторної діаграми

<div class="pie-chart">

Подію буде запущено безпосередньо перед тим, як екземпляр секторної діаграми буде знищено
function

Події екземплярів застосунку та кругової діаграми

Екземпляр секторної діаграми запускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом pieChart.
ПодіяАргументОписТип
select
(pieChart, index, dataset)
Подія буде ініційована (якщо спливаючу підказку ввімкнено) при наведенні курсора на діаграму
undefined
pieChartSelect
(pieChart, index, dataset)
Подія буде ініційована (якщо спливаючу підказку ввімкнено) при наведенні курсора на діаграму
undefined
beforeDestroy
(pieChart, index, dataset)
Подію буде запущено безпосередньо перед знищенням екземпляра секторної діаграми. В якості аргументу обробник події отримує екземпляр секторної діаграми
undefined
pieChartBeforeDestroy
(pieChart, index, dataset)
Подію буде запущено безпосередньо перед знищенням екземпляра секторної діаграми. В якості аргументу обробник події отримує екземпляр секторної діаграми
undefined

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pie Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Techno4 comes with simple to use and fully responsive Pie Chart component.</p>
        <p>Pie Chart generates SVG layout which makes it also compatible with SSR (server side rendering).</p>
      </div>
      <div class="block-title">Simple Pie Chart</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-1"></div>
      </div>

      <div class="block-title">With Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-2"></div>
      </div>

      <div class="block-title">Custom Format Tooltip</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="pie-chart pie-chart-3"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $onMounted, $onBeforeUnmount }) => {
    let pieSimple;
    let pieTooltip;
    let pieCustomTooltip;

    $onMounted(() => {
      pieSimple = $t4.pieChart.create({
        el: '.pie-chart-1',
        datasets: [
          {
            value: 100,
            color: '#f00',
          },
          {
            value: 200,
            color: '#0f0',
          },
          {
            value: 300,
            color: '#00f',
          },
        ]
      });
      pieTooltip = $t4.pieChart.create({
        el: '.pie-chart-2',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 150,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 150,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 400,
            color: '#00f',
          },
        ]
      })
      pieCustomTooltip = $t4.pieChart.create({
        el: '.pie-chart-3',
        tooltip: true,
        datasets: [
          {
            label: 'JavaScript',
            value: 1000,
            color: '#ff0',
          },
          {
            label: 'Vue.js',
            value: 100,
            color: '#0f0',
          },
          {
            label: 'TypeScript',
            value: 200,
            color: '#00f',
          },
        ],
        formatTooltip(data) {
          const { value, label, color } = data;
          return `You have <span style="color: ${color}">${value} points</span> for ${label}`;
        }
      })
    })

    $onBeforeUnmount(() => {
      pieSimple.destroy();
      pieTooltip.destroy();
      pieCustomTooltip.destroy();
    })

    return $render;
  }
</script>