Блог

У меня на графике есть 3 субвалютных индикатора. Каждый индикатор подценности представляет данные. Например; основной, самостоятельный и вспомогательный. Я использую диаграммы Devextreme для создания этого линейного датчика в своем проекте React. Я хочу написать разные метки на индикаторе субвалюты. Как я могу это сделать? Вот пример:

мой код

 import React from "react";
import {
  LinearGauge,
  Scale,
  Tick,
  Label,
  RangeContainer,
  Range,
  ValueIndicator,
  SubvalueIndicator,
  Export,
  Title,
  Font
} from "devextreme-react/linear-gauge";

class App extends React.Component {
  render() {
    var data = {
      main: 37.99005555555556,
      self: -37.03,
      sub: 171.24033333333333
    };
    ...
    return (
      <LinearGauge
        id="gauge"
        subvalues={[data["main"], data["self"], data["sub"]]}
      >
        <Scale
          id="scale"
          startValue={min_value}
          endValue={max_value}
          tickInterval={5}
          id="bar"
          
        >
          <Tick color="#48d1ff" />
          <Label indentFromTick={-3} />
        </Scale>
        <RangeContainer
          id="range_container"
          offset={10}
          id="bar"
          startValue={-10}
        >
          <Range startValue={min_value} endValue={data["main"]} id="bar" />
          <Range startValue={data["main"]} endValue={data["self"]} />
          <Range startValue={data["self"]} endValue={data["sub"]} />
          <Range startValue={data["sub"]} endValue={max_value} />
        </RangeContainer>
        <ValueIndicator offset={20} />
        <SubvalueIndicator offset={-17} color={"#48d1ff"} type="textCloud" />
        <Export enabled={false} />
      </LinearGauge>
    );
  }
}

export default App;