Skip to main content

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

Навігація

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

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

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

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

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

Тепер нам потрібно створити/ініціалізувати секторну діаграму. Давайте розглянемо пов’язані методи роботи з застосунком:
МетодОпис
app.pieChart.create(parameters)
створити екземпляр кругової діаграми

● parameters - object. Об'єкт з параметрами кругової діаграми

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

app.pieChart.destroy(el)
знищити екземпляр секторної діаграми

● el - HTMLElement or string (with CSS Selector) or object. Елемент секторної діаграми або екземпляр секторної діаграми для знищення.

app.pieChart.get(el)
отримати екземпляр секторної діаграми за елементом HTML

● el - HTMLElement or string (with CSS Selector). Елемент секторної діаграми.

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

app.pieChart.update(parameters)
оновити/повторно відтворити кругову діаграму SVG відповідно до переданих даних

● parameters -object Об’єкт із параметрами секторної діаграми

Метод повертає екземпляр кругової діаграми

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

Тепер давайте подивимося на список доступних параметрів, необхідних для створення кругової діаграми:
ПараметрОписТип
el
Елемент секторної діаграми. HTMLElement або рядок із CSS-селектором елемента кругової діаграми. Згенерований SVG буде вставлено в цей елемент
HTMLElement

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

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

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

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

Події DOM

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

<div class="pie-chart">

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

<div class="pie-chart">

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

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

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

Приклади 

<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>

Techno4 Framework