首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >react-native-chart-kit不同阴影颜色

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

Stack Overflow用户
提问于 2021-01-30 13:54:45
回答 1查看 516关注 0票数 1

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

代码语言:javascript
运行
复制
<LineChart
  data={{
    labels: dataDayOfWeek,
    datasets: [
      {
        data: dataValueNew,
        color: `rgba(25, 255, 12, 1)`,
      },
      {
        data: dataValueOld,
        color: `rgba(25, 255, 12, 0)`,
        withShadow: false, //this did not work
      },
    ],
  }}
/>;
EN

回答 1

Stack Overflow用户

发布于 2021-06-11 17:41:54

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

该文档有一个名为useShadowColorFromDataSet -> Boolean的字段,这里是chartConfig - https://github.com/indiespirit/react-native-chart-kit

只需在chartConfig中声明它,然后在datasets中使用Color字段,就完成了。

下面是一个示例代码片段->

代码语言:javascript
运行
复制
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, 4, 6, 8, 8, 2],
                strokeWidth: 2,
                color: (opacity = 1) => black,
                colors: 'purple' // optional
              },
              {
                data: [9, 4, 7, 8, 2, 4],
                strokeWidth: 3,
                color: (opacity = 1) => blue, // optional
              },
          ],
        }}
        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, 255, ${opacity}),
          labelColor: (opacity = 1) => rgba(255, 255, 255, ${opacity}),
          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',
  },
});

嗯,它总是出现在文档里。它告诉我们,总是正确地阅读文档。我花了一个小时才弄明白。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65965084

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档