时间戳

首页 > 解决方案 > 将货币格式应用于 Y 轴

reactjs - 将货币格式应用于 Y 轴

问题描述

我正在使用 React-Vis 库 ( https://uber.github.io/react-vis/documentation/general-principles/scales-and-data ) 创建折线图。我能够XType={'time'}在我的<XYPLot/>组件上设置以获取 X 轴上的时间值。

但是，我无法将 Y 轴上的数值更改为货币值。我只需要在数字前面加一个 $ 符号。有人知道该怎么做吗？

我的渲染（）代码：

render() {
    return (
      <React.Fragment>
        <ChartContainer>
          <h2>{this.state.chartTitle}</h2>
          <FlexibleXYPlot
            xType="time"
          >
            <HorizontalGridLines />
            <VerticalGridLines />
            <LineSeries data={this.state.chartData}/>
            <XAxis title={this.state.XAxisLabel} position='middle' tickSize={2} />
            <YAxis title={this.state.YAxisLabel} position='middle' tickValues={[]} />
          </FlexibleXYPlot>
        </ChartContainer>
      </React.Fragment>
    )
  }

标签： reactjsdata-visualization

解决方案

tickFormat通过在目标轴上设置prop 来实现：

<YAxis
  title={this.state.YAxisLabel}
  position='middle'
  tickFormat={v => `$${v}`}
/>

推荐阅读