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

Question

我正在使用 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, 0, 0, 1)`,

  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,
    fontFamily: 'Bogle-Regular',
    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, 0, 2, 4, 6, 3, 0],
    },
  ],
};

const props = {
  data,
};

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

Answer 1

我认为目前无法对 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.

Answer 2

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

const chartConfig = {
  backgroundGradientFrom: "#fff",
  backgroundGradientTo: "#fff",
  barPercentage: 0.7,
  height:5000,
  fillShadowGradient: `rgba(1, 122, 205, 1)`,
  fillShadowGradientOpacity: 1,
  decimalPlaces: 0, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(1, 122, 205, 1)`,
  labelColor: (opacity = 1) => `rgba(0, 0, 0, 1)`,

  style: {
    borderRadius: 16,
    fontFamily: "Bogle-Regular",
  },
  propsForBackgroundLines: {
    strokeWidth: 1,
    stroke: "#e3e3e3",
    strokeDasharray: "0",
  },
  propsForLabels: {
    fontFamily: "Bogle-Regular",
  },
};

Answer 3

您也可以传递单独的颜色和活动的 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, 40, 72, 40],
                    colors: [
                        (opacity = 1) => `#BE95FF`,
                        (opacity = 1) => `#78A9FF`,
                        (opacity = 1) => `#FFFFFF`,
                        (opacity = 1) => `#FFFFFF`,
                        (opacity = 1) => `#FFFFFF`,
                        (opacity = 1) => `#FFFFFF`,
                        (opacity = 1) => `#FFFFFF`,
                        (opacity = 1) => `#FFFFFF`,
                        (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

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

Solid bars in bar chart with react-native-chart-kit

react-native

react-native-chart-kit