Область діаграми
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
- Get Started
- Introduction
- Kitchen Sink
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar