时间戳

首页 > 解决方案 > React Native 聊天工具包中的条形图设计

javascript - React Native 聊天工具包中的条形图设计

问题描述

我正在使用 React Native 聊天工具包中的 BarChart

我想实现以下设计 在此处输入图像描述

到目前为止，我已经达到了这一点，但仍然无法完全实现.. 在此处输入图像描述

请帮助我进行实际的酒吧设计

这是我的代码

              <BarChart
                data={chartData}
                width={400}
                height={160}
                chartConfig={chartConfig}
                showValuesOnTopOfBars={true}
                showBarTops={false}
                withHorizontalLabels={false}
               />

//配置

const chartConfig = {
backgroundGradientFrom: '#ffffff',
fillShadowGradient: '#4084F4',
decimalPlaces: 0,
barPercentage: 0.5,
fillShadowGradientOpacity: 1,
backgroundGradientFromOpacity: 1,
backgroundGradientTo: '#ffffff',
spacingInner: 0.7,
backgroundGradientToOpacity: 1,
color: () => `#4084F4`,
labelColor: () => `black`,
withShadow: false,

propsForBackgroundLines: {
  strokeWidth: 0,
},

};

标签： javascriptreactjsreact-nativebar-chartreact-native-chart-kit

解决方案

推荐阅读