मैं highcharts/highstock का उपयोग करके एक एप्लिकेशन को लागू करने का प्रयास कर रहा हूं और मुझे पूर्ण स्क्रीन फ़ंक्शन का उपयोग करने में समस्या का सामना करना पड़ रहा है।

मुझे अपने चार्ट में एक निश्चित ऊंचाई निर्धारित करने की आवश्यकता है और मेरे पृष्ठ से प्रत्येक चार्ट को एक पूर्ण स्क्रीन के रूप में देखने में सक्षम होना चाहिए, लेकिन चूंकि ऊंचाई तय है, यह पूर्ण स्क्रीन लोड होने पर वही रहता है, मैंने दृष्टिकोण की कोशिश की है यह पोस्ट लेकिन यह काम नहीं कर रहा है, अगर मैं चार्ट को 100% पर सेट करता हूं पृष्ठ को ओवरफ्लो करता है और स्क्रीन के पहलू अनुपात के आधार पर क्रॉप हो जाता है।

मुझे यह कार्यशील डेमो भी मिला है, मैं इसे दोहरा नहीं सकता। मुझे यकीन नहीं है कि वह घटक को कैसे बुला रहा है, मुझे यह भी नहीं पता कि निर्यात मॉड्यूल (हैमबर्गर मेनू) कैसे दिख रहा है अगर इसे कभी नहीं कहा जाता है।

render() {
    return <div className="chart" ref={ref => this.container = ref} />
  }

मेरे आवेदन पर मैं घटक को इस तरह बुला रहा हूँ

render() {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="stockChart"
      options={options}
      allowChartUpdate
      callback={this.afterChartCreated}
    />
  )
}

मैंने सीएसएस के माध्यम से height सेट करने का प्रयास करने के लिए इस तत्व को ID पास करने का प्रयास किया लेकिन यह काम नहीं करता है।

मैं एक कार्य उदाहरण के साथ अपने आवेदन को दोहराने की कोशिश कर रहा था , मैं इसे केवल आयात संरचना के कारण कोडसैंडबॉक्स पर कर सकता था, लेकिन किसी कारण से पूर्ण स्क्रीन वहां काम नहीं कर रही है, यह इस संदेश का संकेत देता है

एक फ्रेम के अंदर पूर्ण स्क्रीन समर्थित नहीं है।

0
Bernardo Marques 14 अप्रैल 2020, 15:58

1 उत्तर

सबसे बढ़िया उत्तर

यह डेमो हाईचार्ट्स रिएक्ट रैपर का उपयोग किए बिना चार्ट बनाता है - यह शुद्ध हाईचार्ट्स का संयोजन है जेएस और रिएक्ट - यही कारण है कि निर्यात मेनू इसे बिना बुलाए दिखाता है। हाईचार्ट्स रिएक्ट रैपर समान रूप से काम करते हैं, लेकिन अधिक 'प्रतिक्रिया का तरीका' और घटक को प्रबंधित करने के अन्य अवसर देता है।

अपने मुद्दे पर वापस - मुझे लगता है कि एक बेहतर तरीका हाईचार्ट्स घटक की ऊंचाई को इनलाइन रिएक्ट स्टाइल के रूप में परिभाषित करना होगा। आप इसे containerProps ऑब्जेक्ट में सेट करके हासिल कर सकते हैं।

    <CardContent style={{ padding: 0 }}>
      <HighchartsReact
        highcharts={Highcharts}
        containerProps={{ style: { height: "400px" } }}
        options={options}
        allowChartUpdate
      />
    </CardContent> 

डेमो: https://codesandbox.io/s /fix-full-screen-253sq?file=/src/CustomGUIChart.js

इसका परीक्षण करने के लिए open in new window कोडसैंडबॉक्स विकल्प (निर्यात मेनू हैमबर्गर के ठीक ऊपर स्थित बटन) का उपयोग करें।

1
Sebastian Wędzel 14 अप्रैल 2020, 15:21