所以我想在我的图表上画两条线,我用color
给每条线分配了不同的颜色。我也想给每一行一个不同的阴影。但是,通过更改withShadow
,它将为两个都使用true
,或者为两个都使用false
,而不能分别为每个。我希望我可以对一个数据集使用阴影,而不是另一个数据集,或者为每个数据集使用不同颜色的阴影。
<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
},
],
}}
/>;
发布于 2021-06-11 17:41:54
它有一个非常简单的特性。我也花了一个小时才弄明白。
该文档有一个名为useShadowColorFromDataSet -> Boolean的字段,这里是chartConfig - https://github.com/indiespirit/react-native-chart-kit
只需在chartConfig中声明它,然后在datasets中使用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, 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',
},
});
嗯,它总是出现在文档里。它告诉我们,总是正确地阅读文档。我花了一个小时才弄明白。
https://stackoverflow.com/questions/65965084
复制相似问题