Создавайте многоразовый код для создания калибровочных диаграмм.
- Ниже приведены подробности кода javascript, который используется для создания калибровочной диаграммы. Это повторно используемый код с несколькими параметрами, которые можно настроить.
Начнем с создания класса GaugeChart и конструктора, который принимает параметры для построения датчика.
· ChartColor: цвет диаграммы по умолчанию, когда анимация не происходит (когда диаграмма не обновляется значением).
· innerRadius: внутренний радиус дуги.
· outerRadius: внешний радиус дуги.
· NeedleColor : цвет иглы.
· Поле: поле для диаграммы, если вокруг диаграммы требуется свободное пространство. По умолчанию будет учитываться пространство в 1 пиксель.
· NeedleHeight: если пользователю нужна какая-либо конкретная высота для иглы, можно указать, иначе игла будет охватывать внешний радиус дуги.
· ColorPerPercent : это значение словаря, которое содержит значения в форме
«‹‹ColorCode››» : {«start»:‹‹startPercent››», «end»:‹‹endPercent ››}
«ColorCode»: это цвет дуги, который будет отображаться, когда стрелка указывает между процентами «startPercent» и «endPercent».
· Id: идентификатор элемента, внутри которого будет создана диаграмма.
- Далее давайте попробуем создать калибровочную диаграмму с параметрами, полученными выше.
Оценим высоту и ширину графика, исключая поля. И установите идентификатор для диаграммы, начиная с Gauge_ и добавляя идентификатор элемента, переданный в качестве параметра. Код this.id.replace(/\s+/g,"") удаляет все пробелы в идентификаторе, переданном в качестве параметра.
Сначала создайте элемент svg с оцененными идентификатором, высотой и шириной.
Переместите диаграмму так, чтобы она выровнялась по предоставленным полям, а также по центру.
Чтобы нарисовать дугу и стрелку из центра диаграммы, поместите курсор в середину диаграммы.
Создание и дуга с внутренним радиусом и внешним радиусом
Поскольку нам нужно будет создать верхнюю полудугу, начальный угол должен быть установлен на Math.PI/2
, а конечный угол — на –Math.PI/2.
Добавьте дугу к диаграмме с цветом и границей диаграммы по умолчанию.
Stroke-width — это граница дуги.
Далее давайте оценим угол начала иглы. Давайте рассмотрим 0 градусов для крайнего левого угла и 180 градусов для крайнего правого угла.
0 градусов равно 0%
90 градусов равно 50%
180 градусов это 100%
Приведенный ниже код преобразует проценты в радианы для позиционирования стрелки.
А пока давайте рассмотрим 0deg.CenterX и CenterY со значением 0.
Теперь вычислите позиции X и Y, чтобы нарисовать иглу.
Теперь нарисуйте иглу так, чтобы игла указывала на 0 градусов (0%). Положение иглы должно быть центральным.
Нарисуйте маленький круг в нижней части иглы. Круг на 2 пикселя больше радиуса иглы.
Результат: Приведенный выше код создает приведенный ниже график.
Теперь давайте добавим html-код для создания измерительной диаграммы с указанными ниже входными параметрами.
Теперь давайте перейдем к включению функции обновления
В этом случае игла создается для каждого угла в градусах, а цвет дуги изменяется в соответствии с тем, куда указывает игла в данном случае.
Функция selectColor() определяет цвет дуги в зависимости от положения стрелки. Это устанавливается в соответствии с предоставленными входными данными в соответствии с начальным и конечным процентом и цветами для каждого.
chart.updateGaugeChart(0,63);
с приведенным выше кодом переместит стрелку на 63% и установит цвет дуги от синего → зеленого → красного по мере движения иглы по пути.
Результат :
Пожалуйста, найдите полный код в репозитории git:
