Skip to main content

Область діаграми

Навігація

Область діаграми

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

Макет площинної діаграми

Оскільки Area Chart SVG генерується за допомогою JavaScript, його макет HTML максимально простий:
<!-- Area Chart element -->
<div class="area-chart"></div>

Методи застосунку Area Chart

Тепер нам потрібно створити/ініціалізувати Area Chart. Давайте розглянемо пов’язані методи роботи з програмою:
app.areaChart.create(parameters)- створити екземпляр Area Chart

● parameters - object. Об'єкт з параметрами Area Chart

Метод повертає створений екземпляр Area Chart

app.areaChart.destroy(el)- знищити екземпляр Area Chart

● el - HTMLElement or string за допомогою селектора CSS) або object. Елемент Area Chart або екземпляр Area Chart для знищення.

app.areaChart.get(el)- отримати екземпляр Area Chart за елементом HTML

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

Метод повертає екземпляр Area Chart

app.areaChart.update(parameters)- Об'єкт з параметрами Area Chart

● parameters - object. (за допомогою селектора CSS). Елемент площинної діаграми.

Метод повертає екземпляр Area Chart

Параметри площинної діаграми

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

string

width
640
Ширина згенерованого зображення SVG (у пікселях)
number
height
320
Висота створеного зображення SVG (у пікселях)
number
ПараметрЗа замовчуваннямОписТип
datasets
[]
Набори даних діаграм. Кожен об’єкт у масиві наборів даних має такі властивості:
array
 
/** Dataset value */
values: number[];
/** Dataset HEX color */
color?: string;
/** Dataset label */
label?: string;
ПараметрЗа замовчуваннямОписТип
lineChart
false
Вмикає лінійну діаграму (замість діаграми з областями)
boolean
axis
false
Вмикає горизонтальну (X) вісь діаграми
boolean
axisLabels
[]
Мітки горизонтальної (X) осі діаграми. Має бути така ж кількість елементів, як і значення набору даних
array
tooltip
false
Вмикає спливаючу підказку при наведенні
boolean
legend
false
Вмикає легенду діаграми
boolean
toggleDatasets
false
Якщо ввімкнено, він перемикатиме набори даних під час натискання елементів легенди
boolean
maxAxisLabels
8
Максимальна кількість міток осі (галочки), які будуть видимі на осі
number
formatAxisLabel
Спеціальна функція візуалізації для форматування тексту мітки осі
function(label)
formatLegendLabel
Настроювана функція візуалізації для форматування тексту підпису легенди
function(label)
ПараметрОписТип
formatTooltip
Спеціальна функція візуалізації, яка має повертати HTML-вміст спливаючої підказки. Отриманий об'єкт даних має такі властивості:
function(data)
 
/index: number;
total: number;
datasets: {
  color?: string;
  label: any;
  value: number;
}
ПараметрОписТип
formatTooltipAxisLabel
Спеціальна функція візуалізації для форматування тексту мітки осі у підказці
function(label)
formatTooltipTotal
Спеціальна функція візуалізації для форматування тексту загального значення у підказці
function(total)
formatTooltipDataset
Спеціальна функція візуалізації для форматування тексту набору даних у підказці
function(label, value, color)
ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
 
var areaChart = app.areaChart.create({
  el: '.area-chart',
  on: {
    beforeDestroy: function () {
      console.log('Area Chart will be destroyed')
    }
  }
})

Методи та властивості площинної діаграми

Отже, щоб створити діаграму площ, ми повинні викликати:
var areaChart = app.areaChart.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (наприклад, змінна areaChart у прикладі вище) з корисними методами та властивостями:
Властивість Опис
areaChart.app
Посилання на глобальний екземпляр застосунку
areaChart.el
HTML-елемент Area Chart
areaChart.$el
Екземпляр Dom7 з HTML-елементом Area Chart
areaChart.svgEl
Елемент HTML SVG, створений діаграмою з площами
areaChart.$svgEl
Екземпляр Dom7 із згенерованим елементом SVG HTML
areaChart.params
Параметри діаграми з областями

Методи

МетодОпис
areaChart.update(parameters)
Оновити/повторно відобразити елемент SVG Area Chart відповідно до переданих параметрів. Він приймає об’єкт із тими самими параметрами, що необхідні для ініціалізації Area Chart. Ви можете передати лише параметри, які потрібно оновити, наприклад.
 
var areaChart = app.areaChart.create({
  datasets: datasetsA,
  // ...
});

// and when we need to update rendered SVG based on new datasets:
areaChart.update({
  datasets: datasetsB,
});
МетодОпис
areaChart.destroy()
Знищує екземпляр Area Chart
areaChart.on(event, handler)
Додати обробник подій
areaChart.once(event, handler)
Додати обробник подій, який буде видалено після запуску
areaChart.off(event, handler)
Видалити обробник подій
areaChart.off(event)
Видалити всі обробники для вказаної події
areaChart.emit(event, ...args)
Запустити подію на примірнику площинної діаграми

Події площинної діаграми

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

Події DOM

ПодіяОб'єктОпис
areachart:select
Area Chart Element

<div class="area-chart">

Подія буде ініційована (якщо спливаючу підказку ввімкнено) при наведенні курсора на діаграму
areachart:beforedestroy
Area Chart Element

<div class="area-chart">

Подія буде ініційована безпосередньо перед знищенням екземпляра Area Chart

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

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

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-area-chart-current-line-stroke-width: 2px;
  --t4-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
  --t4-area-chart-axis-text-color: inherit;
  --t4-area-chart-axis-height: 1px;
  --t4-area-chart-axis-font-size: 10px;
  --t4-area-chart-axis-font-weight: 500;
  --t4-area-chart-tooltip-font-size: 12px;
  --t4-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
  --t4-area-chart-tooltip-total-font-size: 16px;
  --t4-area-chart-tooltip-total-font-weight: bold;
  --t4-area-chart-tooltip-color-size: 10px;
  --t4-area-chart-legend-font-size: 14px;
  --t4-area-chart-legend-font-weight: 500;
  --t4-area-chart-legend-text-color: inherit;
  --t4-area-chart-legend-padding: 4px 8px;
  --t4-area-chart-legend-border-radius: 4px;
  --t4-area-chart-legend-color-size: 14px;
  --t4-area-chart-line-stroke-width: 2px;
  --t4-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
  --t4-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
}
:root .dark,
:root.dark {
  --t4-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
  --t4-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
}

Приклади 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Area Chart</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Simple Area Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-simple"></div>
      </div>
      <div class="block-title">Area Chart With Tooltip</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-tooltip"></div>
      </div>
      <div class="block-title">Area Chart With Axis</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-axis"></div>
      </div>
      <div class="block-title">Area Chart With Legend</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-with-legend"></div>
      </div>
      <div class="block-title">Lines Chart</div>
      <div class="block block-strong">
        <div class="area-chart area-chart-lines"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $onMounted, $onBeforeUnmount }) => {
    let areaSimple;
    let areaWithTooltip;
    let areaWithAxis;
    let areaWithLegend;
    let areaLines;

    // helpers data for axis
    const dates = [];
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    for (let i = 0; i < 4; i += 1) {
      dates.push(new Date(year, month - (3 - i)))
    }
    const axisDateFormat = Intl.DateTimeFormat(undefined, { month: 'short', year: 'numeric' })
    const tooltipDateFormat = Intl.DateTimeFormat(undefined, { month: 'long', year: 'numeric' })

    $onMounted(() => {
      areaSimple = $t4.areaChart.create({
        el: '.area-chart-simple',
        datasets: [
          {
            color: '#f00',
            values: [0, 100, 250, 300, 175, 400]
          },
          {
            color: '#00f',
            values: [100, 75, 133, 237, 40, 200]
          },
          {
            color: '#ff0',
            values: [100, 300, 127, 40, 250, 80]
          },
        ]
      });
      areaWithTooltip = $t4.areaChart.create({
        el: '.area-chart-with-tooltip',
        tooltip: true,
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 75, 133, 237, 40, 200]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 300, 127, 40, 250, 80]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 300, 175, 400]
          },
        ]
      });

      areaWithAxis = $t4.areaChart.create({
        el: '.area-chart-with-axis',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Green data',
            color: '#0f0',
            values: [100, 75, 133, 237]
          },
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307]
          },
        ]
      });

      areaWithLegend = $t4.areaChart.create({
        el: '.area-chart-with-legend',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [100, 300, 127, 47]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [100, 75, 133, 237]
          },
          {
            label: 'Yellow data',
            color: '#ff0',
            values: [0, 100, 250, 307]
          },
        ]
      });

      areaLines = $t4.areaChart.create({
        el: '.area-chart-lines',
        tooltip: true,
        axis: true,
        axisLabels: dates,
        legend: true,
        toggleDatasets: true,
        lineChart: true,
        formatAxisLabel(date) {
          return axisDateFormat.format(date);
        },
        formatTooltipAxisLabel(date) {
          return tooltipDateFormat.format(date);
        },
        datasets: [
          {
            label: 'Red data',
            color: '#f00',
            values: [0, 300, 127, 47]
          },
          {
            label: 'Blue data',
            color: '#00f',
            values: [0, 75, 133, 237]
          },
          {
            label: 'Green data',
            color: '#0f0',
            values: [0, 100, 250, 307]
          },
        ]
      });
    })

    $onBeforeUnmount(() => {
      areaSimple.destroy();
      areaWithTooltip.destroy();
      areaWithAxis.destroy();
      areaWithLegend.destroy();
      areaLines.destroy();
    })

    return $render;
  }
</script>

Techno4 Framework