英文:
How to implement this chart with custom axis component in react-native?
问题
我想在React Native应用中实现这个图表。我已经找到了几个图表，但不确定如何实现axios标签组件。有人能给我建议吗？
英文:
I'd like to implement this chart in react-native app. I already found the several charts, but not sure how to implement the axios label component. Can anyone suggest me?
答案1
得分: 1
胜利 📈
仓库：https://github.com/FormidableLabs/victory
文档和示例：https://formidable.com/open-source/victory/
我成功地得到了你想要的可视化效果。以下是我的代码：
import React from 'react'
import { VictoryChart, VictoryLine, VictoryAxis } from 'victory-native'
const MyChart = () => {
const lineData = [
{ x: 'Jan 2022', y: 3000 },
{ x: 'Feb 2022', y: 2000 },
{ x: 'Mar 2022', y: 2500 },
{ x: 'Apr 2022', y: 2800 },
{ x: 'May 2022', y: 3200 },
{ x: 'Jun 2022', y: 4000 },
{ x: 'Jul 2022', y: 3000 },
{ x: 'Aug 2022', y: 3400 },
{ x: 'Sep 2022', y: 4250 },
{ x: 'Oct 2022', y: 4100 },
{ x: 'Nov 2022', y: 4450 },
{ x: 'Dec 2022', y: 3940 },
{ x: 'Jan 2023', y: 4100 }
]
const tickData = [
{ month: 1, quarter: 'Q1', year: 2022 },
{ month: 2, year: 2022 },
{ month: 3, year: 2022, displayYear: true },
{ month: 4, year: 2022 },
{ month: 5, quarter: 'Q2', year: 2022 },
{ month: 6, year: 2022 },
{ month: 7, year: 2022, displayYear: true },
{ month: 8, year: 2022 },
{ month: 9, quarter: 'Q3', year: 2022 },
{ month: 10, year: 2022 },
{ month: 10, year: 2022, displayYear: true },
{ month: 12, year: 2022 },
{ month: 1, quarter: 'Q1', year: 2023 },
]
const yearData = tickData.map((data, index) => {
if (data.displayYear) {
return {
year: data.year
}
}
})
return (
<VictoryChart domainPadding={10} width={Dimensions.get('window').width}>
<VictoryAxis
tickValues={tickData.map((_, index) => index + 1)}
tickFormat={tickData.map(data => data?.quarter ? `${data.quarter}` : '')}
style={{
axis: {stroke: 'transparent'},
axisLabel: {fontSize: 20, padding: 30},
grid: {
stroke: ({ tick }) => tickData[tick - 1]?.quarter ? '#1a205c' : '#d1d1d1',
strokeDasharray: '4,5'
},
tickLabels: {fontSize: 18, padding: 5}
}}
domain={{x: [10, 10], y: [0, 1]}}
/>
<VictoryAxis
tickValues={yearData.map((_, index) => index + 1)}
tickFormat={yearData.map(data => data?.year ? `${data.year}` : '')}
style={{
axis: {stroke: 'transparent'},
grid: {
stroke: ({ tick }) => 'transparent',
},
tickLabels: {fontSize: 18, padding: 5,}
}}
/>
<VictoryLine
data={lineData}
style={{
data: { stroke: 'black', }
}}
x="x"
y="y"
/>
</VictoryChart>
)
}
英文:
Victory 📈
Repository : https://github.com/FormidableLabs/victory
Docs & Examples : https://formidable.com/open-source/victory/
I managed to get the visual you wanted. Here is my code :
import React from 'react'
import { VictoryChart, VictoryLine, VictoryAxis } from 'victory-native'
const MyChart = () => {
const lineData = [
{ x: 'Jan 2022', y: 3000 },
{ x: 'Feb 2022', y: 2000 },
{ x: 'Mar 2022', y: 2500 },
{ x: 'Apr 2022', y: 2800 },
{ x: 'May 2022', y: 3200 },
{ x: 'Jun 2022', y: 4000 },
{ x: 'Jul 2022', y: 3000 },
{ x: 'Aug 2022', y: 3400 },
{ x: 'Sep 2022', y: 4250 },
{ x: 'Oct 2022', y: 4100 },
{ x: 'Nov 2022', y: 4450 },
{ x: 'Dec 2022', y: 3940 },
{ x: 'Jan 2023', y: 4100 }
]
const tickData = [
{ month: 1, quarter: 'Q1', year: 2022 },
{ month: 2, year: 2022 },
{ month: 3, year: 2022, displayYear: true },
{ month: 4, year: 2022 },
{ month: 5, quarter: 'Q2', year: 2022 },
{ month: 6, year: 2022 },
{ month: 7, year: 2022, displayYear: true },
{ month: 8, year: 2022 },
{ month: 9, quarter: 'Q3', year: 2022 },
{ month: 10, year: 2022 },
{ month: 10, year: 2022, displayYear: true },
{ month: 12, year: 2022 },
{ month: 1, quarter: 'Q1', year: 2023 },
]
const yearData = tickData.map((data, index) => {
if (data.displayYear) {
return {
year: data.year
}
}
})
return (
<VictoryChart domainPadding={10} width={Dimensions.get('window').width}>
<VictoryAxis
tickValues={tickData.map((_, index) => index + 1)}
tickFormat={tickData.map(data => data?.quarter ? `${data.quarter}` : '')}
style={{
axis: {stroke: 'transparent'},
axisLabel: {fontSize: 20, padding: 30},
grid: {
stroke: ({ tick }) => tickData[tick - 1]?.quarter ? '#1a205c' : '#d1d1d1',
strokeDasharray: '4,5'
},
tickLabels: {fontSize: 18, padding: 5}
}}
domain={{x: [10, 10], y: [0, 1]}}
/>
<VictoryAxis
tickValues={yearData.map((_, index) => index + 1)}
tickFormat={yearData.map(data => data?.year ? `${data.year}` : '')}
style={{
axis: {stroke: 'transparent'},
grid: {
stroke: ({ tick }) => 'transparent',
},
tickLabels: {fontSize: 18, padding: 5,}
}}
/>
<VictoryLine
data={lineData}
style={{
data: { stroke: 'black', }
}}
x="x"
y="y"
/>
</VictoryChart>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论