带有 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