react-native-chart-kit 不同的阴影颜色

问题描述

所以我想在图表上画两条线，我使用 color 为每条线指定了不同的颜色。我也想给每条线一个不同的阴影。但是，通过更改 withShadow，它要么为两者都 true，要么为两者都 false，不能为每个。我希望我可以为一个数据集而不是另一个数据集使用阴影，或者为每个数据集使用不同的颜色。

<LineChart
  data={{
    labels: dataDayOfWeek,datasets: [
      {
        data: dataValueNew,color: `rgba(25,255,12,1)`,},{
        data: dataValueOld,0)`,withShadow: false,//this did not work
      },],}}
/>;

解决方法

它有一个非常简单的功能。我也花了一个小时才弄明白。

chartConfig 有一个字段叫做 useShadowColorFromDataSet -> Boolean 这是文档 - https://github.com/indiespirit/react-native-chart-kit

只需在 chartConfig 中声明，然后在数据集中使用 Color 字段即可。

这是一个示例代码片段 ->

import * as React from 'react';
import { Text,View,StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import {
  LineChart,BarChart,PieChart,ProgressChart,ContributionGraph,StackedBarChart,} from 'react-native-chart-kit';
import { Dimensions } from 'react-native';
const screenWidth = Dimensions.get('window').width;
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
  return (
    <View>
      <Text>Bezier Line Chart</Text>
      <LineChart
        data={{
          labels: ['January','February','March','April','May','June'],datasets: [
            {
                data: [9,7,6,4,2,5],strokeWidth: 2,color: (opacity = 1) => purple,// optional
              },{
                data: [9,8,2],color: (opacity = 1) => black,colors: 'purple' // optional
              },4],strokeWidth: 3,color: (opacity = 1) => blue,],}}
        width={Dimensions.get('window').width} // from react-native
        height={220}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1} // optional,defaults to 1
        chartConfig={{
          backgroundColor: 'grey',backgroundGradientFrom: 'grey',backgroundGradientTo: 'grey',decimalPlaces: 2,// optional,defaults to 2dp
          color: (opacity = 1) => rgba(255,255,${opacity}),labelColor: (opacity = 1) => rgba(255,style: {
            borderRadius: 16,},propsForDots: {
            r: '',propsForBackgroundLines: {
            color: 'black',stroke: 'black',strokeDasharray:[],useShadowColorFromDataset: true
        }}
        bezier
        style={{
          marginVertical: 8,borderRadius: 16,}}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',paddingTop: Constants.statusBarHeight,backgroundColor: '#ECF0F1',padding: 8,paragraph: {
    margin: 24,fontSize: 18,fontWeight: 'bold',textAlign: 'center',});

嗯，它总是出现在文档中。教，总是正确阅读文档。我花了一个小时才弄明白。