``` npm i @hydro-g/graph ```
npm install @hydro-g/graph
npm i @hydro-g/graph
`
Создание
`ts
import { GraphElement, defineGraph } from '@hydro-g/graph'
defineGraph()
const graphElement = new GraphElement({
// 'x' | 'y' | 'xy' | 'none'
autoGrid: 'xy',
// Названия осей
xName: 'Q, м3/c',
yName: 'H, см',
// Названия осей в подсказке движения курсора
tooltipXName: 'Q',
tooltipYName: 'H',
// Ручная настройка сетки
xValueMin: 0,
yValueMin: 0,
xValueMax: 100,
yValueMax: 100,
columns: 10,
rows: 10,
maxMult: 1.25,
roundingX: 100,
roundingY: 100,
// 'left' | 'right' | 'none'
yAxisSide: 'left',
// 'bottom' | 'top' | 'none'
xAxisSide: 'bottom',
// Ручные отступы вокруг сетки
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0,
})
document.body.appendChild(graphElement)
`
Свойства
$3
`ts
graphElement.editedBezierCurveName
`
$3
`ts
graphElement.editedCosineCurveName
`
Методы
$3
`ts
graphElement.createStaticBezierCurve('name', {
// Данные точек
data: [
{
x: 50,
y: 50,
},
{
x: 100,
y: 100,
},
],
// Цвет кривой
color: 'black',
// Цвет выделения кривой
selectColor: 'black',
// Размер поинта
pointSize: 0.005,
// Если указано, разбивает линию на сегменты
lineDash: 5,
})
`
$3
`ts
graphElement.createEditableBezierCurve('name', {
data: [
{
x: 50,
y: 50,
},
{
x: 100,
y: 100,
},
],
// Цвет кривой
color: 'black',
// Цвет выделения кривой
selectColor: 'black',
// Размер поинта
pointSize: 0.005,
// Если указано, разбивает линию на сегменты
lineDash: 5,
// Красит кривую в этот цвет если она построена правильно
goodColor: 'green',
// Красит кривую в этот цвет если она построена неверно
badColor: 'red',
// Показывается ли редактируемая кривая в том положении в котором был включен режим редактирвания
previousVisible: true,
})
`
$3
`ts
graphElement.enableBezierCurveEditing('name')
`
$3
`ts
graphElement.updateBezierCurve(
'name',
// Новые точки
[
{
x: 60,
y: 60,
},
{
x: 120,
y: 120,
},
]
)
`
$3
`ts
graphElement.applyBezierCurveChanges()
`
$3
`ts
graphElement.disableBezierCurveEditing()
`
$3
`ts
graphElement.hideBezierCurve('name')
`
$3
`ts
graphElement.showBezierCurve('name')
`
$3
`ts
graphElement.getBezierCurveData('name')
`
$3
`ts
graphElement.deleteBezierCurve('name')
`
$3
`ts
graphElement.hasBezierCurve('name')
`
$3
`ts
graphElement.getAllBezierCurvesNames()
`
$3
`ts
// selectColor должен отличаться от color
graphElement.selectBezierCurve('name')
`
$3
`ts
// selectColor должен отличаться от color
graphElement.unselectBezierCurve('name')
`
$3
`ts
graphElement.renameBezierCurve('oldName', 'newName)
$3
`ts
graphElement.createCosineCurve('name', {
// 'symmetrical-left' | 'symmetrical-right' | 'two-branches'
type: 'two-branches',
// Цвет кривой
color: 'black',
// Цвет выделения кривой
selectColor: 'black',
// Размер поинта
pointSize: 0.005,
// Если указано, разбивает линию на сегменты
lineDash: undefined,
})
`
$3
`ts
graphElement.deleteCosineCurve('name')
`
$3
`ts
graphElement.enableCosineCurveEditing('name')
`
$3
`ts
graphElement.disableCosineCurveEditing()
`
$3
`ts
graphElement.hideCosineCurve('name')
`
$3
`ts
graphElement.showCosineCurve('name')
`
$3
`ts
// selectColor должен отличаться от color
graphElement.selectCosineCurve('string')
`
$3
`ts
graphElement.unselectCosineCurve('name')
`
$3
`ts
graphElement.getCosineCurveData(name)
`
$3
`ts
graphElement.renameCosineCurve('oldName', 'newName')
`
$3
`ts
graphElement.hasCosineCurve('name')
`
$3
`ts
graphElement.getAllCosineCurvesNames()
`
$3
`ts
graphElement.createPointCloud(
'name',
{
// Массив точек.
// Если для точки указано свойство info,
// то при наведении на неё будет показываться подсказка
// !Значениями x и y могут быть Date
data: [
{ x: 20, y: 20, info: ['x: 20', 'y: 20'] },
{ x: 40, y: 50 },
{ x: 80, y: 80 },
],
// Форма поинта. 'circle' | 'square' | 'triangle' | 'star'
pointShapeType: 'circle',
// Цвет закрашивая поинта
pointFill: 'lightblue',
// Цвет обводки поинта
pointStroke: 'red',
// Размер поинта
pointSize: 0.005,
},
// Участвует ли облако в поиске ближайшей точки при добавлении ограничений
false
)
`
$3
`ts
graphElement.updatePointCloud('name', [
{
x: 20,
y: 20,
},
{
x: 50,
y: 50,
},
])
`
$3
`ts
graphElement.hidePointCloud('name')
`
$3
`ts
graphElement.showPointCloud('name')
`
$3
`ts
graphElement.deletePointCloud('name')
`
$3
`ts
graphElement.hasPointCloud('name')
`
$3
`ts
graphElement.getAllPointCloudsNames()
`
$3
`ts
graphElement.enableLimits()
`
$3
`ts
graphElement.disableLimits()
`
$3
`ts
graphElement.clearLimits()
`
$3
`ts
graphElement.hideLimits()
`
$3
`ts
graphElement.showLimits()
`
$3
`ts
graphElement.createRanges('name', {
data: [
{
// Дата стартовой линии
from: new Date('2021-04-15'),
// Дата конечной линии
to: new Date('2021-06-15'),
// Если указано, показывается при наведении
fromInfo: ['2021-04-15'],
// Если указано, показывается при наведении
toInfo: ['2021-06-15'],
},
{
...
},
{
...
},
],
// Цвет между промежутками при наведении
fillColor: '#4c6ef5',
// Цвет стартовой линии
fromColor: '#37A31D',
// Цвет конечной линии
toColor: '#9F6205',
})
`
$3
`ts
graphElement.removeRanges('name')
`
$3
`ts
graphElement.updateRanges('name', [
{
// Дата стартовой линии
from: new Date('2021-04-15'),
// Дата конечной линии
to: new Date('2021-06-15'),
// Если указано, показывается при наведении
fromInfo: ['2021-04-15'],
// Если указано, показывается при наведении
toInfo: ['2021-06-15'],
},
{
...
},
{
...
},
])
`
$3
`ts
graphElement.hideRanges('name')
`
$3
`ts
graphElement.showRanges('name')
`
$3
`ts
graphElement.hasRanges('name')
`
$3
`ts
graphElement.getAllRangesNames()
`
Events
$3
`ts
const curveDataChangeListener = ((event: CurveDataChangeEvent) => {
console.log(event.detail.curveName, event.detail.data)
}) as EventListener
graphElement.addEventListener('curve-data-change', curveDataChangeListener)
`
$3
Тоже самое что и у кривой безье, но нужно сдвинуть данные по оси X на один день
`ts
import { shiftDataByOneDay } from '@hydro-g/graph'
const curveDataChangeListener = ((event: CurveDataChangeEvent) => {
console.log(event.detail.curveName, shiftDataByOneDay(event.detail.data))
}) as EventListener
graphElement.addEventListener('curve-data-change', curveDataChangeListener)
`
$3
`ts
const limitsDataChangeListener = ((event: LimitsDataChangeEvent) => {
console.log(event.detail.data)
}) as EventListener
graphElement.addEventListener('limits-data-change', limitsDataChangeListener)
`
Разное
$3
`css
x-graph {
width: 100%;
height: 100%;
font-size: 1vmin;
font-family: sans-serif;
}
`
$3
`ts
import { getTimelineAxisParts, GraphElement } from '@hydro-g/graph'
const timelineAxisParts = getTimelineAxisParts(
// Нужен ли январь или нет
false
)
const graphElement = new GraphElement({
...timelineAxisParts.graphParameters,
yName: 'y',
})
graphElement._isDrawXMark = timelineAxisParts.isDrawXMark
graphElement._getXMarkValue = timelineAxisParts.getXMarkValue
graphElement._getXPointerValue = timelineAxisParts.getXPointerValue
``