如何解决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',});
嗯,它总是出现在文档中。教,总是正确阅读文档。我花了一个小时才弄明白。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。