【问题标题】:modify label's width in react-native-chart-kit在 react-native-chart-kit 中修改标签的宽度
【发布时间】:2020-06-14 23:28:36
【问题描述】:

我正在用我的动态值绘制图表,我需要知道两件事:

1/ 使用 react-native-chart-kit 的 LineChart 修改 x 和 y 中标签的宽度!!

2/ 控制我的图表的比例

如果您知道可以做到这一点的比例或选项;

 <LineChart
            data={this.state.data}
            width={Dimensions.get("window").width*0.9}
            height={400}
            //yAxisLabel={"DH"}
            chartConfig={chartConfig}
            bezier
            spacing={0.8}
            spacingInner={0.8}
            verticalLabelRotation={90}
            style={{
              marginTop:40,
              marginLeft:20,
              fontSize:1,
            }}
            />
const chartConfig = {
  backgroundColor: "#f5f3ed",
  backgroundGradientFrom: "#f5f3ed",
  backgroundGradientTo: "#f5f3ed",
  //decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(3, 2, 2, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(3, 2, 2, ${opacity})`,
  barPercentage: 0.5,
  style: {
    borderRadius: 16
  },
  propsForDots: {
    r: "6",
    strokeWidth: "2",
    stroke: "#ffa726"
  }
}

【问题讨论】:

    标签: react-native react-native-chart-kit


    【解决方案1】:
    1. propsForLabels 可以用来覆盖标签的样式,react-native-svg
    2. 图表的比例与数据集的极值成正比。如果您希望缩小规模,这意味着您的数据应该在一个相当小的范围之间。

    【讨论】:

    • 嗨,你知道它是否可以一直从 0 到 100?另外,我需要为 Y 轴彩色框制作标签,如红色、黄绿色。你知道这是否也可能吗?
    猜你喜欢
    • 2022-09-25
    • 1970-01-01
    • 2021-06-09
    • 1970-01-01
    • 1970-01-01
    • 2021-05-03
    • 1970-01-01
    • 2021-05-03
    • 1970-01-01
    相关资源
    最近更新 更多