javascript - 如何在 DevExtreme 图表中的 SubvalueIndicator 上放置标签？

Question

我的图表中有 3 个 SubvalueIndicator。每个 SubvalueIndicator 代表一个数据。例如; 主要，自我和次要。我正在使用 Devextreme 图表在我的 React 项目中创建此线规。我想在 SubvalueIndicator 上写不同的标签。我怎样才能做到这一点？这是一个例子：

我的代码

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;

标签： javascriptreactjsdevextreme