हाइचार्ट्स: प्रत्येक xAxis ग्रिडलाइन

Question

पर क्लिक करने योग्य छवि जोड़ना मैं कुछ कस्टम कार्यक्षमता में निर्माण कर रहा हूं जहां उपयोगकर्ता उस तारीख में नोट्स जोड़ने के लिए लाइन चार्ट में डेटा बिंदुओं पर क्लिक कर सकते हैं। यह थोड़ा भ्रामक है क्योंकि नोट्स वास्तव में मेट्रिक्स से जुड़े नहीं हैं बल्कि यह जिस तारीख पर है, वह है। दूसरे शब्दों में, यदि मेरे पास एक पंक्ति चार्ट पर 6 श्रृंखला है जो 01/01/12 - 01/08/12 की तारीखों को फैलाती है, 01/05/12 को एक ही नोट सभी 6 श्रृंखलाओं पर लागू होगा। इसलिए, जैसा कि आप कल्पना कर सकते हैं कि 6 श्रृंखलाओं में से किसी एक पर डेटा बिंदु पर क्लिक करने या 01/05/12 की तारीख उपयोगकर्ता को यह विश्वास करने के लिए गुमराह करेगी कि यह नोट उस डेटा बिंदु पर लागू होगा, न कि संपूर्ण तिथि और किसी भी श्रृंखला उस तारीख पर भूमि।

तो, यह प्रयोज्य समस्या का प्रतिकार करने मैं तय कर लिया है कि सबसे अच्छा संकेत देती कुछ इस तरह होगा:

प्रत्येक xAxis gridline के शीर्ष पर एक क्लिक करने योग्य आइकन होगा कि होगा xAxis ग्रिडलाइन के साथ स्केल करने की आवश्यकता है (जैसे कि कोई उपयोगकर्ता ज़ूम इन करने के लिए क्षेत्र का चयन करता है)।

इसे खींचने के लिए सबसे अच्छा तरीका सुझाव? मुझे केवल एक सुझाव की आवश्यकता है कि आइकन को प्रत्येक पंक्ति में कैसे जोड़ना है ... मेरे पास पहले से ही बनाई गई सभी पोस्ट-क्लिक कार्यक्षमता है।

Answer 1

छवियों की स्थिति और load ईवेंट का उपयोग करने के लिए redraw ईवेंट का उपयोग करके मार्क के सुझाव पर बिल्डिंग। load पर उन्हें निर्यात के दौरान उपलब्ध कराने के लिए आवश्यक है और आप प्रत्येक redraw पर नई छवियां नहीं बनाना चाहेंगे।

इन चार्ट घटनाओं उपयोग किया जाता है:

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

drawImages समारोह में मैं उलटा अनुवाद का उपयोग कर रहा xAxis चार्ट पर चित्रों को के लिए:

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2; 

और फिर उन्हें जोड़ने और एक क्लिक हैंडलर, ज़िन्डेक्स, पॉइंटर कर्सर सेट करना:

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add(); 

इन alignImagesattr फ़ंक्शन का उपयोग उन छवियों के लिए नए x और y मानों को सेट करने के लिए किया जाता है, जिनकी गणना drawImages में की जाती है।

पूर्ण उदाहरण पर jsfiddle

स्क्रीनशॉट:

Answer 2

विचारों का जोड़ा। सबसे पहले, चार्ट चार्ट को फिर से खींचा जाने पर ज़ूम करने के लिए चार्ट redraw ईवेंट का उपयोग करेगा (ज़ूम पर कहें)। फिर दूसरा, स्पष्ट रूप से अपनी छवियों को रुचि के अक्ष स्थानों पर रखें। उन क्वेरी को सीधे डोम से बाहर निकालने के लिए।

jQuery का उपयोग करना:

$('.highcharts-axis') //return an array of the two axis. 

वे svg होगा (एक्स, वाई) पदों के साथ "पाठ तत्व" बच्चों।