javascript 使用react-native-chart-kit模块中的条形图时，条形图未居中

vawmfj5a 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(140)

我正试图将这个react-native-chart-kit条形图对齐到中心。Bar Chart
这是我目前拥有的代码：

<BarChart
          data={{
            labels: ["SU", "MO", "TU", "WE", "TH", "FR", "SA"],
            datasets: [
              {
                data: [
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                  Math.random() * 100,
                ],
              },
            ],
          }}
          width={Dimensions.get("window").width - 100}
          height={220}
          withHorizontalLabels={false}
          fromZero={true}
          withInnerLines={false}
          chartConfig={{
            backgroundGradientFrom: dark.backgroundColor,
            backgroundGradientTo: dark.backgroundColor,
            decimalPlaces: 0,
            fillShadowGradientFrom: accent,
            fillShadowGradientTo: accent,
            fillShadowGradientFromOpacity: 1,
            fillShadowGradientToOpacity: 0.25,
            barPercentage: 0.75,
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          }}
          style={{
            marginVertical: 10,
            borderRadius: 10,
          }}
        />

我想禁用withHorizontalLabels属性也会删除它所占用的空间，但事实并非如此。我试过调整propsForHorizontalLabels的样式，但没有结果。

JavaScript

来源：https://stackoverflow.com/questions/76123423/bar-graph-is-not-centering-when-using-the-bar-graph-from-react-native-chart-kit

1条答案

按热度按时间

fjaof16o1#

下面是一个工作示例：

import React from 'react';
import { View, Dimensions } from 'react-native';
import { BarChart } from 'react-native-chart-kit';

export default function App() {
  const data = {
    labels: ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'],
    datasets: [
      {
        data: [
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
          Math.random() * 100,
        ],
      },
    ],
  };

  const chartConfig = {
    backgroundGradientFrom: '#1E2923',
    backgroundGradientTo: '#08130D',
    decimalPlaces: 0,
    fillShadowGradientFrom: '#00bfff',
    fillShadowGradientTo: '#00bfff',
    fillShadowGradientFromOpacity: 1,
    fillShadowGradientToOpacity: 0.25,
    barPercentage: 0.75,
    color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  };

  return (
   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <BarChart
        data={data}
        width={350}
        height={220}
        yAxisSuffix="%"
        chartConfig={chartConfig}
        style={{ marginVertical: 8, borderRadius: 16 }}
      />
    </View>

  );
}

在这里检查：https://snack.expo.dev/@footios/charts-in-the-center

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 使用react-native-chart-kit模块中的条形图时，条形图未居中

1条答案

相关问题

热门标签

最新问答