मैं रिएक्ट Google चार्ट कैंडलस्टिक चार्ट को लागू करने की कोशिश कर रहा हूं, और मैं चार्ट में अपने डेटा को प्लग कर रहा हूं, लेकिन जब चार्ट प्रदर्शित होते हैं, तो कैंडलस्टिक्स एक समय में एक रंग में प्रदर्शित होते हैं, भले ही मैं रंग विकल्प बदलता हूं।
options={{
legend: "none",
bar: { groupWidth: "100%" }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red
risingColor: { strokeWidth: 0, fill: "#0f9d58" } // green
}
}}
मैं लगभग निश्चित हूं कि मेरा डेटा सही ढंग से आकार दिया गया है (यह चार्ट डेटा प्रॉपर्टी को पास किए गए सरणी का ऑर्डर_डेटा सरणी है।
data={this.state.ordered_data}
चार्ट पर विक्स भी प्रदर्शित नहीं हो रहे हैं, भले ही मेरा डेटा डिफ़ॉल्ट उदाहरण डेटा के समान आकार में फिट बैठता है।
मैं अपने चार्ट दिखाने वाले कोडसैंडबॉक्स से लिंक कर रहा हूं।
बिना किसी बत्ती के और सभी मोमबत्तियों के साथ एक ही रंग का चार्ट नीचे दिखाया गया है
चार्ट के लिए कोड के साथ कोडसैंडबॉक्स नीचे एम्बेड किया गया है। इस चार्ट का उपयोग करने का आधिकारिक उदाहरण यहां दिया गया है: React Google चार्ट कैंडलस्टिक। मैंने बिना किसी लाभ के फॉलिंग कलर और राइजिंग कलर सेटिंग्स का उपयोग करके रंगों को कस्टमाइज़ करने का प्रयास किया है। मैं विक्स प्रदर्शित करने के लिए कैसे प्राप्त कर सकता हूं?
आप कोडसैंडबॉक्स में कंसोल से मेरे डेटा का आकार देख सकते हैं।
<iframe src="https://codesandbox.io/embed/charming-oskar-15lkf?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="charming-oskar-15lkf" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
1 उत्तर
कोड सैंडबॉक्स और कंसोल में डेटा को देखते हुए,
ऐसा लगता है कि आपका डेटा इस प्रकार संरचित है...
"day", "open", "high", "low", "close"
लेकिन Google के कैंडलस्टिक चार्ट के लिए डेटा प्रारूप के अनुसार ,
डेटा होना चाहिए निम्नानुसार संरचित किया जाना चाहिए...
"day", "low", "open", "close", "high"