mdt-charts v1.15.6
Charts
Demo: https://vishulaknow.github.io/charts-demo/
Установка
npm install mdt-charts
Импорт
import { Chart } from "mdt-charts"
Импорт TypeScript интерфейсов
import { Config, DesignerConfig } from "mdt-charts"
Использование
Для создания графика минимально требуется конфигуратор, конфигуратор дизайнера и данные.
const chart = new Chart(config, designerConfig, data);
Конфигуратор
Пример настроек для построения простого барчарта:
{
"canvas": {
"class": "svg-chart outline",
"size": {
"width": 800,
"height": 400
}
},
"options": {
"title": "Количество автомобилей",
"type": "2d",
"isSegmented": false,
"axis": {
"key": {
"position": "end",
"ticks": {
"flag": false
},
"visibility": true
},
"value": {
"domain": {
"start": -1,
"end": -1
},
"position": "start",
"ticks": {
"flag": false
},
"visibility": true
}
},
"additionalElements": {
"gridLine": {
"flag": {
"value": true,
"key": true
}
}
},
"legend": {
"show": true
},
"orientation": "vertical",
"data": {
"dataSource": "dataSet",
"keyField": {
"name": "brand",
"format": "string"
}
},
"selectable": true,
"charts": [
{
"title": "Рост стоимости",
"type": "bar",
"data": {
"valueFields": [
{
"name": "price",
"format": "money",
"title": "Заголовок"
}
]
},
"tooltip": {
"show": true
},
"markers": {
"show": true
},
"embeddedLabels": "key"
}
]
}
}
Конфигуратор дизайнера
Пример рекомендованных значений для конфигуратора дизайнера:
const designerConfig: DesignerConfig = {
canvas: {
axisLabel: {
maxSize: {
main: 60
}
},
chartBlockMargin: {
top: 30,
bottom: 20,
left: 20,
right: 20
},
legendBlock: {
maxWidth: 200
},
chartOptions: {
bar: {
minBarWidth: 3,
maxBarWidth: 30,
groupMinDistance: 16,
barDistance: 8,
groupMaxDistance: 35
},
donut: {
padAngle: 0,
minThickness: 40,
maxThickness: 60,
aggregatorPad: 30
}
}
},
chartStyle: {
baseColors: ['#209de3', '#ff3131', '#ffba00', '#20b078']
},
elementsOptions: {
tooltip: {
position: 'followCursor'
}
},
dataFormat: {
formatters: (value: any, options: { type?: string; title?: string; empty?: string; } = {}) => {
var type = typeof value;
if ((value === undefined || value === null || value === "") && type != "boolean" && options.type != "boolean")
return value;
if (type == "boolean" || options.type == "boolean") {
return value.toString();
}
if (value instanceof Date) {
return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes()
}
if (options.type === "markdown") {
return value.toString();
}
if ((options.type === "money" || options.type === "number")) {
return Intl.NumberFormat('ru-Ru', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
}
return value;
}
}
}
Для разработчиков
Для загрузки всех зависимостей использйте скрипт:
npm install
Для сборки плейграунда необходимо запустить скрипт:
npm run dev
Полученные файлы будут расположены в папке dist.
11 months ago
11 months ago
11 months ago
9 months ago
11 months ago
11 months ago
11 months ago
9 months ago
9 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago