条形图中带有react-native-chart-kit的实心条

问题描述

我正在使用https://www.npmjs.com/package/react-native-chart-kit，并试图制作一张图表以符合以下设计规格：

我可以使用大多数选项来处理在此问题结尾处附加的代码，但是我似乎无法弄清楚如何消除每个单独条形的不透明度，因此最终看起来像这样：

我一直在仔细研究源代码，并玩弄道具和样式都徒劳无功。任何帮助将不胜感激！

const { width: screenWidth } = Dimensions.get('window');

export type DataSet = {
  data: Array<Number>;
};

export type BarChartData = {
  labels: Array<String>;
  datasets: Array<DataSet>;
};

export interface SalesChartProps {
  data: BarChartData;
}

const chartConfig = {
  backgroundGradientFrom: '#Ffffff',backgroundGradientTo: '#ffffff',barPercentage: 1.3,decimalPlaces: 0,// optional,defaults to 2dp
  color: (opacity = 1) => `rgba(1,122,205,1)`,labelColor: (opacity = 1) => `rgba(0,style: {
    borderRadius: 16,fontFamily: 'Bogle-Regular',},propsForBackgroundLines: {
    strokeWidth: 1,stroke: '#efefef',strokeDasharray: '0',propsForLabels: {
    fontFamily: 'Bogle-Regular',};

const SalesBarChart: FunctionComponent<SalesChartProps> = (
  props: SalesChartProps,) => (
  <>
    <Text style={styles.chartTitle}> Sales </Text>
    <BarChart
      style={styles.graphStyle}
      showBarTops={false}
      showValuesOnTopOfBars={true}
      withInnerLines={true}
      segments={3}
      data={props.data}
      width={screenWidth - 15}
      height={175}
      yAxisLabel=""
      chartConfig={chartConfig}
      verticalLabelRotation={0}
    />
  </>
);

const styles = StyleSheet.create<{
  graphStyle: ViewStyle;
  chartTitle: TextStyle;
}>({
  graphStyle: {
    flex: 1,paddingRight: 25,chartTitle: {
    paddingLeft: 20,paddingBottom: 20,paddingTop: 10,fontSize: 16,})

//storybook file:
const data: BarChartData = {
  labels: ['9/19','9/20','9/21','9/22','9/23','9/24','9/25'],datasets: [
    {
      data: [5,2,4,6,3,0],],};

const props = {
  data,};

storiesOf('SalesChart',module)
  .addDecorator(withKnobs)
  .add('BarChart',() => <SalesChart {...props} />);

解决方法

我认为对于BarChart组件，目前尚不可能执行此操作，因为代表条形图的Rect组件的填充都设置为渐变fillShadowGradient （https://github.com/indiespirit/react-native-chart-kit/blob/master/src/BarChart.tsx）。

不过，您可以通过更改chartConfig中的以下属性来更改这些条的颜色及其不透明度：

fillShadowGradient: 'blue',fillShadowGradientOpacity: 1,

如果将不透明度设置为1，则颜色看起来确实更坚固，但渐变仍然存在。

---

另一种方法是使用StackedBarChart并将data中的每个元素放置在自己的数组中，这样条形就不会堆叠：

const CustomStackedChart = () => {
  const data = {
    labels: ['9/19','9/20','9/21','9/22','9/23','9/24','9/25'],legend: [],data: [[5],[0],[2],[4],[6],[3],[0]],barColors: ['blue'],};
  return (
    <StackedBarChart
      style={styles.graphStyle}
      segments={3}
      data={data}
      width={300}
      height={175}
      chartConfig={chartConfig}
    />
  );
};

StackedBarChart允许纯色。可以通过在数据对象内部设置barColors属性来设置颜色。

这种方法的问题在于，您不能像在图片中那样在条形图的顶部放置条形图标签：

---

如果您确实要创建自定义内容，则可以创建扩展AbstractChart的自定义图表组件，但是如果您真正想要更改的唯一内容是颜色，则需要进行大量的工作。固体。

https://github.com/indiespirit/react-native-chart-kit#abstract-chart。

,

我发现了这个可怕的解决方案，如果您在图表配置中使用高度并将其设置为非常高的数字，则条形图看起来很实，例如：

const chartConfig = {
  backgroundGradientFrom: "#fff",backgroundGradientTo: "#fff",barPercentage: 0.7,height:5000,fillShadowGradient: `rgba(1,122,205,1)`,decimalPlaces: 0,// optional,defaults to 2dp
  color: (opacity = 1) => `rgba(1,labelColor: (opacity = 1) => `rgba(0,style: {
    borderRadius: 16,fontFamily: "Bogle-Regular",},propsForBackgroundLines: {
    strokeWidth: 1,stroke: "#e3e3e3",strokeDasharray: "0",propsForLabels: {
    fontFamily: "Bogle-Regular",};

,

您也可以传递单独的颜色和活动的 flatColor

withCustomBarColorFromData={true}
flatColor={true}

示例

const data = { 
            labels: ["1","2","3","4","5","6","7","8","9"],datasets: [
                {
                    data: [40,84,56,40,60,55,72,40],colors: [
                        (opacity = 1) => `#BE95FF`,(opacity = 1) => `#78A9FF`,(opacity = 1) => `#FFFFFF`,]
                } 
            ]
        }; 



<BarChart 
  style={{
  marginLeft: - Metrics.padding * 4
  }}
  data={data}
  width={chartStyles.chart.width}
  height={chartStyles.chart.height} 
  chartConfig={{ 
  backgroundColor: "transparent",backgroundGradientTo: "white",backgroundGradientFromOpacity: 0,backgroundGradientFrom: "white",backgroundGradientToOpacity: 0,color: (opacity = 1) => `#FFFFFF`,barPercentage: 0.28,barRadius : 5,}}
 withHorizontalLabels={false}
 fromZero={true}
 withCustomBarColorFromData={true}
 flatColor={true}
 withInnerLines={false}
 showBarTops={false}
 showValuesOnTopOfBars={true}
 />

print