2023 में रिएक्टिव नेटिव चार्टिंग करने का सबसे अच्छा तरीका

चार्ट से संबंधित आवश्यकताओं को लिखने के लिए सबसे अधिक उपयोग की जाने वाली चार्ट लाइब्रेरी ईचार्ट्स है।

वेबसाइट पर इचार्ट्स का प्रदर्शन काफी परिपक्व है, और एप्लेट पक्ष के लिए आधिकारिक समाधान प्रदान किया गया है, लेकिन आरएन में कोई संगत समर्थन नहीं है। बाजार में, अधिकांश खोज अभी भी वेबव्यू कार्यान्वयन के सार पर आधारित है, और मैं आरएन-आधारित कार्यक्रम को प्राथमिकता देता हूं। आखिरकार, मूल अनुभव वेब से बेहतर होगा।

बाद में, मुझे अपनी जरूरतों को पूरा करने के लिए @wuba/react-native-echarts मिले, इसलिए इसे आज़माएं; परिणाम खराब नहीं हैं। कार्यान्वयन के सिद्धांत में रुचि रखने वालों के लिए यहां क्लिक करें

सलाह

• यदि आपके पास पहले से ही एपीपी पैकेज है, तो आप पिछली पैकेजिंग प्रक्रिया को अनदेखा कर सकते हैं और सीधे चरण 4 से शुरू कर सकते हैं।
• परीक्षण के लिए पूरा कोड GitHub पर है: https://github.com/iambool/TestApp

इसे इस्तेमाल करने के स्टेप्स इस प्रकार हैं

चरण 1. विकास पर्यावरण सेटअप

यह एक स्थानीय आरएन विकास वातावरण बनाने की प्रक्रिया है जो पहले से ही इंटरनेट पर उपलब्ध है, इसलिए मैं इसे फिर से नहीं देखूंगा। आप इसे Google पर खोज सकते हैं :)

चरण 2. आरएन परियोजना बनाना

जैसा कि यह एक परीक्षण था, मैंने टेस्टएप नामक एक आरएन प्रोजेक्ट को नए सिरे से शुरू करने के लिए एक्सपो का इस्तेमाल किया।

 npx create-expo-app TestApp 

चरण 3. मोबाइल उपकरणों पर एक ऐप बनाना

कमांड लाइन के साथ आईओएस और एंड्रॉइड ऐप पैकेज जेनरेट करें।

आईओएस को एमुलेटर का उपयोग करने की सिफारिश की जाती है (प्रमाणपत्र से मिलान करने की आवश्यकता नहीं है)। एंड्रॉइड पर रहते हुए, मैं असली मशीन से जुड़ा था।

 yarn android yarn ios

पैकेज जनरेट करने के बाद, फोन पर नीचे जैसा ऐप पहले से इंस्टॉल है, जिसका मतलब है कि यह सफल है।

चरण 4. संबंधित निर्भरताओं को स्थापित करें

 yarn add @wuba/react-native-echarts echarts yarn add @shopify/react-native-skia yarn add react-native-svg

नोट: यदि आप किसी मौजूदा प्रोजेक्ट में स्थापित कर रहे हैं, तो स्थापना पूर्ण होने के बाद आपको एक नया पैकेज बनाना होगा, अन्यथा मूल निर्भरताओं की कमी एक त्रुटि की सूचना देगी।

चरण 5. स्की मॉडल का प्रयास करें

@wuba/react-native-echarts दो रेंडरिंग मोड्स (Skia और Svg) को सपोर्ट करता है, पहले Skia के साथ एक सिंपल चार्ट ट्राई करें।

यह इन छोटे चरणों में बांटा गया है:

• इचार्ट्स, चार्ट घटकों और अन्य निर्भरताओं का परिचय दें।
• चार्ट घटकों का पंजीकरण।
• एक चार्ट उदाहरण बनाएँ और एक विकल्प सेट करें।
• पृष्ठ नष्ट होने पर चार्ट उदाहरणों का सिंक्रनाइज़ विनाश।

विशिष्ट कोड इस प्रकार है:

 import { useRef, useEffect } from 'react'; import { View } from 'react-native'; /** * 1. Import the echarts dependency, this example first tries the line chart */ import * as echarts from 'echarts/core'; import { LineChart } from 'echarts/charts'; import { GridComponent } from 'echarts/components'; import { SVGRenderer, SkiaChart } from '@wuba/react-native-echarts'; /** * 2. Register the required components * SVGRenderer: it is required to register * LineChart: because we want to show the line chart, we have to import LineChart * - If you don't know which components to import, just look at the error report and add whatever the error says is missing * GridComponent: This is the prompt when the error is reported, and then I added the, ha ha */ echarts.use([SVGRenderer, LineChart, GridComponent]); export default () => { const skiaRef = useRef(null); // Ref for saving chart instances useEffect(() => { /** * 3. chart option */ const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', }, ], }; let chart; if (skiaRef.current) { /** * 4. Initialize the chart, specifying the lower width and height */ chart = echarts.init(skiaRef.current, 'light', { renderer: 'svg', width: 400, height: 400, }); chart.setOption(option); } /** * 5. To destroy the chart instance after the page is closed */ return () => chart?.dispose(); }, []); return ( <View className='index'> <SkiaChart ref={skiaRef} /> </View> ); };

कोड लिखने, फोन को हिलाने और बंडल पैकेज को फिर से लोड करने के बाद, एक त्रुटि रिपोर्ट की गई:

त्रुटि अपरिवर्तनीय उल्लंघन: आवश्यकताएँ मूल घटक: "SkiaDomView" UIManager में नहीं मिला।

मैंने इसे गुगल किया और यह कहता है कि इसे संस्करण डाउनग्रेड की आवश्यकता है। यह एक्सपो संस्करण के अनुरूप होना चाहिए, निर्भरता स्थापित करते समय एक समान संकेत होगा, संकेतित संस्करण स्थापित करें और यह ठीक हो जाएगा।

इसलिए मैंने निर्देशों का पालन किया और एक संस्करण डाउनग्रेड किया:

 @shopify/[email protected] [email protected]

ऐप के पुनर्निर्माण के बाद यह लोड हो गया, जो अच्छा था। (लेकिन एंड्रॉइड बिंदु को कवर करता है, ऐसा लगता है कि स्क्रीन की चौड़ाई अनुकूली होनी चाहिए।)

चरण 6. Svg मॉडल का प्रयास करें

Svg मोड के साथ एक अधिक जटिल डायनेमिक सॉर्टिंग बार चार्ट लिखें, और Svg और Skia की तुलना करें। पूरा कोड यहां है।

 // ...Some unimportant code is omitted here // Register the required components, such as BarChart and LegendComponent echarts.use([SVGRenderer, BarChart, LegendComponent, GridComponent]); export default () => { const skiaRef = useRef(null); const svgRef = useRef(null); useEffect(() => { // Skia mode const skiaChartData = getData(); // Generate chart bar data let skiaChart; let skiaInter; if (skiaRef.current) { skiaChart = echarts.init(skiaRef.current, 'light', { renderer: 'svg', width: 300, height: 300, }); skiaChart.setOption(getDefaultOption(skiaChartData)); setTimeout(function () { run(skiaChart, skiaChartData); }, 0); skiaInter = setInterval(function () { run(skiaChart, skiaChartData); }, 3000); } // Svg mode const svgChartData = getData(); let svgChart; let svgInter; if (svgRef.current) { svgChart = echarts.init(svgRef.current, 'light', { renderer: 'svg', width: 300, height: 300, }); svgChart.setOption(getDefaultOption(svgChartData)); setTimeout(function () { run(svgChart, svgChartData); }, 0); svgInter = setInterval(function () { run(svgChart, svgChartData); }, 3000); } return () => { skiaChart?.dispose(); svgChart?.dispose(); // The timer has to be cleaned up, otherwise it will still run after exiting the page clearInterval(skiaInter); clearInterval(svgInter); }; }, []); return ( <View> <Text>skia</Text> <SkiaChart ref={skiaRef} /> <Text>svg</Text> <SvgChart ref={svgRef} /> </View> ); };

मैं अपनी आँखों से इन दोनों विधाओं के बीच का अंतर नहीं देख सकता।

चरण 7. रैपिंग चार्ट घटक

अब तक प्रभाव काफी अच्छा था, लेकिन हर बार जब मैं आयात करने के लिए चीजों का एक गुच्छा इस्तेमाल करता था, तो यह मुझे परेशान करता था।

आइए इसे सरलता से लपेटें:

 import { useRef, useEffect } from 'react'; import * as echarts from 'echarts/core'; import { BarChart, LineChart, PieChart } from 'echarts/charts'; import { DataZoomComponent, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, } from 'echarts/components'; import { SVGRenderer, SvgChart as _SvgChart, SkiaChart as _SkiaChart, } from '@wuba/react-native-echarts'; import { Dimensions } from 'react-native'; // Register the required components echarts.use([ DataZoomComponent, SVGRenderer, BarChart, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent, TitleComponent, PieChart, LineChart, ]); // Default width and height of the chart const CHART_WIDTH = Dimensions.get('screen').width; // Default with the phone screen width const CHART_HEIGHT = 300; const Chart = ({ option, onInit, width = CHART_WIDTH, height = CHART_HEIGHT, ChartComponent, }) => { const chartRef = useRef(null); useEffect(() => { let chart; if (chartRef.current) { chart = echarts.init(chartRef.current, 'light', { renderer: 'svg', width, height, }); option && chart.setOption(option); onInit?.(chart); } return () => chart?.dispose(); }, [option]); return <ChartComponent ref={chartRef} />; }; const SkiaChart = (props) => <Chart {...props} ChartComponent={_SkiaChart} />; const SvgChart = (props) => <Chart {...props} ChartComponent={_SvgChart} />; // Just export these two guys export { SkiaChart, SvgChart };

चरण 8. एकाधिक चार्ट का उपयोग करना

एक बार जब यह लपेटा जाता है, तो चलिए एक पेज को कई चार्ट्स के साथ लिखते हैं और देखते हैं कि यह कैसे काम करता है। यहां "ई-कॉमर्स डेटा विश्लेषण" के लिए एक पृष्ठ है, जिसमें लाइन चार्ट, बार चार्ट और पाई चार्ट शामिल हैं। नीचे मुख्य कोड svg मोड के साथ लिखा गया है, विस्तृत कोड के लिए यहां क्लिक करें।

 import { SkiaChart } from '../../components/Chart'; import { ScrollView, Text, View } from 'react-native'; import { StatusBar } from 'expo-status-bar'; import { useCallback, useEffect, useState } from 'react'; import { defaultActual, lineOption, salesStatus, salesVolume, userAnaly, getLineData, } from './contants'; import styles from './styles'; // Turn on chart loading const showChartLoading = (chart) => chart.showLoading('default', { maskColor: '#305d9e', }); // Close chart loading const hideChartLoading = (chart) => chart.hideLoading(); export default () => { const [actual, setActual] = useState(defaultActual); // Recording real-time data useEffect(() => { // Assuming a recurring request for data const interv = setInterval(() => { const newActual = []; for (let it of actual) { newActual.push({ ...it, num: it.num + Math.floor((Math.random() * it.num) / 100), }); } setActual(newActual); }, 200); return () => clearInterval(interv); }, [actual]); const onInitLineChart = useCallback((myChart) => { showChartLoading(myChart); // Simulation of data requests setTimeout(() => { myChart.setOption({ series: getLineData, }); hideChartLoading(myChart); }, 1000); }, []); const onInitUserChart = useCallback((myChart) => { // Simulate data request, similar to onInitLineChart }, []); const onInitSaleChart = useCallback((myChart) => { // Simulate data request, similar to onInitLineChart }, []); const onInitStatusChart = useCallback((myChart) => { // Simulate data request, similar to onInitLineChart }, []); const chartList = [ ['订单走势', lineOption, onInitLineChart], ['用户统计', userAnaly, onInitUserChart], ['各品类销售统计', salesVolume, onInitSaleChart], ['订单状态统计', salesStatus, onInitStatusChart], ]; return ( <ScrollView style={styles.index}> <StatusBar style='light' /> <View> <View style={styles.index_panel_header}> <Text style={styles.index_panel_title}>实时数据</Text> </View> <View style={styles.index_panel_content}> {actual.map(({ title, num, unit }) => ( <View key={title} style={styles.sale_item}> <View style={styles.sale_item_cell}> <Text style={styles.sale_item_text}>{title}</Text> </View> <View style={[styles.sale_item_cell, styles.num]}> <Text style={styles.sale_item_num}>{num}</Text> </View> <View style={[styles.sale_item_cell, styles.unit]}> <Text style={styles.sale_item_text}>{unit}</Text> </View> </View> ))} </View> </View> {chartList.map(([title, data, callback]) => ( <View key={title}> <View style={styles.index_panel_header}> <Text style={styles.index_panel_title}>{title}</Text> </View> <View style={styles.index_panel_content}> <SkiaChart option={data} onInit={callback} /> </View> </View> ))} </ScrollView> ); };

बंडल को पुनः लोड करें और परिणाम देखें

रेंडर करने के बाद, आईओएस पर इंटरेक्शन बहुत आसान है, जबकि एंड्रॉइड पर इंटरेक्शन कभी-कभी धीमा लगता है (इसलिए नहीं कि मेरा फोन बहुत खराब है, है ना?...)

स्की मोड को फिर से आज़मा रहे हैं…

ठीक है, हालांकि यह हो सकता है, ऐसा लगता है कि चीनी को ठीक से प्रदर्शित नहीं किया जा सकता है, एंड्रॉइड चीनी प्रदर्शित नहीं होता है, और आईओएस कोड की गड़बड़ी है।

दस्तावेज़ीकरण पढ़ने के बाद, स्की वर्तमान में एंड्रॉइड पक्ष पर चीनी का समर्थन नहीं करता है,

हम 'PingFang SC' के लिए फ़ॉन्ट सेट करके आईओएस पर चीनी प्रदर्शित कर सकते हैं, उदाहरण के लिए:

 const option = { title: { text: '我是中文', textStyle: { fontFamily: 'PingFang SC', // setting the font type }, }, };

लेकिन चीनी प्रदर्शित करने वाली हर जगह को फॉन्ट सेट करना पड़ता है... वह या पहले Svg का उपयोग करें, मैं आलसी हूं।

सारांश

कुछ समय के लिए इसका उपयोग करने के बाद, मैंने निम्नलिखित का सारांश दिया:

• समर्थन के संदर्भ में, @wuba/react-native-echarts जीएल श्रृंखला और मानचित्र चार्ट को छोड़कर सभी प्रकार के चार्ट का समर्थन करता है जो अभी तक समर्थित नहीं हैं, जो दैनिक व्यवसाय के लिए बहुत पर्याप्त है। इचार्ट्स में विभिन्न चार्टों को लागू करने के लिए कोड टैरो-प्लेग्राउंड में पाया जा सकता है।

• इंटरेक्शन, आईओएस बहुत रेशमी चिकनी है, एंड्रॉइड कभी-कभी फ्रेम ड्रॉप के मामले होते हैं।

• प्रदर्शन: प्रदर्शन को आधिकारिक तौर पर अन्य समाधानों से बेहतर बताया जाता है।

  • मैंने यह कोशिश की, बहुत बड़ी मात्रा में डेटा में कोई समस्या नहीं होगी, लेकिन जब डेटा की मात्रा बहुत बड़ी होती है (जैसे कि बड़ी मात्रा में डेटा हीट मैप खींचना), रेंडरिंग गति में काफी कमी आई है, जो कि एक है बिंदु अधिकारी के अनुकूलन की प्रतीक्षा कर रहा है।
  • इसके अलावा, यदि पृष्ठ पर कई चार्ट हैं, तो वास्तविक मशीन पर डिबगिंग करते समय लोडिंग गति धीमी होगी, इसलिए पहले सिम्युलेटर का उपयोग करने की अनुशंसा की जाती है।

• चीनी समर्थन, Svg मोड चीनी का समर्थन करता है, लेकिन स्की मोड अभी उपलब्ध नहीं है।

  
  

उपरोक्त केवल एक व्यक्तिगत विचार है, किसी भी प्रश्न और टिप्पणियों का नीचे स्वागत है!