我想在React Native中创建结合折线图和条形图的图表，

Question

这是设计的附图，我是 React Native 的新手，请帮我创建这个

Answer 1

尝试组合单独的条形图和折线图可能会很麻烦且容易出错。相反，您应该使用支持组合条形图和折线图的图表库。

对于react-native，我开发了一个名为“react-native-gifted-charts”的图表库。它允许您将线条添加到条形图中，只需传递一个名为 showLine 的道具即可。您可以查看

有关组合条形图和折线图的官方文档

。 这是一个例子 -
假设您的数据是 -
[15,30,26,40]

您可以使用以下代码渲染带有线条的条形图-

const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
return <BarChart data={barData} showLine />;

输出是- 

我们需要使线弯曲并向上移动。可以使用

lineConfig

属性自定义线条，如下所示 -

const barData = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];

return (
  <BarChart
    data={barData}
    showLine
    lineConfig={{curved: true, shiftY: 20}} />
);

现在的输出是- 

现在我们已经了解了如何在react-native中组合折线图和条形图，让我们尝试渲染

。图表中的下一个主要挑战是使每个条形的顶部形状为三角形。这可以通过向数据数组中的每个对象添加属性 topLabelComponent 来实现。

图表的完整代码将是-

export const CombinedBarLineChart = () => {

  const Triangle = props => {
    return (
      <View
        style={[
          triangleStyles.triangleCorner,
          props.style,
          {
            borderRightWidth: props.width / 2,
            borderTopWidth: props.width / 2,
            borderTopColor: props.color,
          },
        ]}
      />
    );
  };

  const TopLabel = ({color, label}) => (
    <>
      <Triangle
        width={70}
        color={color}
        style={{
          transform: [{rotate: '45deg'}, {translateX: 12}, {translateY: 13}],
        }}
      />
      <Text style={{position: 'absolute', top: 4, fontWeight: 'bold'}}>
        {'+' + label.toFixed(1)}
      </Text>
    </>
  );

  const iData: Array<itemType> = [
    {value: 12.2, frontColor: '#DAEFF8'},
    {value: 35.7, frontColor: '#C0ECFB'},
    {value: 68.2, frontColor: '#87E0FE'},
    {value: 111.5, frontColor: '#39CCFC'},
    {value: 167.0, frontColor: '#009ACD'},
  ];

  iData.forEach(
    (item,index) =>
      (item.topLabelComponent = () => (
        <TopLabel color={item.frontColor} label={index ? item.value-iData[index-1].value : item.value} />
      )),
  );

  return (
    <BarChart
      barWidth={50}
      spacing={14}
      initialSpacing={10}
      maxValue={260}
      stepHeight={30}
      data={iData}
      rulesType={ruleTypes.SOLID}
      xAxisThickness={0}
      yAxisThickness={0}
      hideYAxisText
      showLine
      lineConfig={{
        curved: true,
        thickness: 3,
        dataPointsColor: '#39CCFC',
        dataPointsRadius: 6,
        color: 'gray',
        shiftY: 56,
      }}
    />
  );
};

const triangleStyles = StyleSheet.create({
  triangleCorner: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightColor: 'transparent',
    transform: [{rotate: '90deg'}],
  },
});

上述代码的最终输出是- 

Answer 2

react-native-chart-kit

来创建 BarChart 你需要安装

yarn add react-native-chart-kit

yarn add react-native-svg //install peer dependencies

您需要导入这些文件

import {
   LineChart,
   BarChart,
   PieChart,
   ProgressChart,
   ContributionGraph,
   StackedBarChart
 } from "react-native-chart-kit";

快速示例

 <View>
   <Text>Bezier Line Chart</Text>
   <LineChart
     data={{
       labels: ["January", "February", "March", "April", "May", "June"],
       datasets: [
         {
           data: [
             Math.random() * 100,
             Math.random() * 100,
             Math.random() * 100,
             Math.random() * 100,
             Math.random() * 100,
             Math.random() * 100
           ]
         }
       ]
     }}
     width={Dimensions.get("window").width} // from react-native
     height={220}
     yAxisLabel="$"
     yAxisSuffix="k"
     yAxisInterval={1} // optional, defaults to 1
     chartConfig={{
       backgroundColor: "#e26a00",
       backgroundGradientFrom: "#fb8c00",
       backgroundGradientTo: "#ffa726",
       decimalPlaces: 2, // optional, defaults to 2dp
       color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
       labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
       style: {
         borderRadius: 16
      },
       propsForDots: {
         r: "6",
         strokeWidth: "2",
         stroke: "#ffa726"
       }
     }}
     bezier
     style={{
       marginVertical: 8,
       borderRadius: 16
     }}
   />
 </View>

欲了解更多详情，您可以查看

这里

。 这会有帮助的。