Измените пользовательский интерфейс Kendo — Тип указателя RadialGauge на пользовательский

#reactjs #kendo-ui #jsgauge #kendo-gauge

Вопрос:

Я пытаюсь изменить указатель в RadialGauge Kendo UI, но я не вижу возможности сделать это в файле jsx.


Это то, чего я пытаюсь достичь- введите описание изображения здесь

Обратите внимание на форму черного указателя. Это больше похоже на форму капли.

Вот как выглядит мой датчик на данный момент- введите описание изображения здесь

Обратите внимание на черный кружок в нижней части указателя. Я хотел бы иметь возможность уменьшить его радиус.

Ниже приведен мой код — https://stackblitz.com/edit/react-zqkayk?file=app/main.jsx

 const radialOptions = {
pointer: {
  type: "needle",
  value: ValueVar,
  color: 'black',
            cap: {
                size: 0.1
            }
},
shape: 'arrow',
scale: {
  max: 100,
  startAngle: 0,
  endAngle: 180,
  rangeSize:10,
  labels: { visible: false },
  majorTicks: { visible: false },
  minorTicks: { visible: false },
  ranges: RangesVar
}
  };
  return <RadialGauge {...radialOptions} />;
 

Я заметил из инструментов разработчика, что это компонент «круг» в классе «k-калибр». и у него есть свойство под названием «r», которое определяет радиус. И если я уменьшу его до «7,7», я уменьшу его.

Но я не уверен, как на это нацелиться.

введите описание изображения здесь

Комментарии:

1. Вы пробовали изменить pointer.cap.size это ? Скажем 0.01 , например?

2. Да @jpllosa , снятие фаски с колпачка.размер повлияет на толщину указателя, а не только на окружность.