highchart: प्रत्येक स्तंभ पर चार्ट के शीर्ष करने के लिए छवियों को जोड़

Question

किसी को भी अगर यह Highcharts में कुछ इस तरह बनाने के लिए संभव है पता है:

यह शीर्ष पर मौसम आइकन के बारे में है। मैंने उन्हें "स्कैटर ग्राफ" के रूप में जोड़ा जो कि अच्छा है, इसलिए छवियों/ग्राफ को अक्षम किया जा सकता है। लेकिन मैं उन्हें हमेशा शीर्ष पर चाहता हूं। उदाहरण के लिए: वाई = 20 पीएक्स या कुछ। क्या हाईचार्ट के साथ ऐसा करना संभव है? मुझे पता है कि उनका डेटा "30 सेल्सियस" पर सेट है, लेकिन अगर तापमान 30 डिग्री तक पहुंच जाएगा तो वह ग्राफ को गड़बड़ कर देगा।

Answer 1

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

Answer 2

आप दो एक्स-कुल्हाड़ियों, छवियों के साथ एक और चार्ट के शीर्ष करने के लिए offset'ed और नीचे वाले सामान्य लेबल के साथ एक होने का एक चाल का उपयोग कर सकते हैं: jsfiddle पर

xAxis: [{ 
    offset: -290, 
    tickWidth: 0, 
    lineWidth: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    labels: { 
     x: 5, 
     useHTML: true, 
     formatter: function() { 
      return '<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;'; 
     } 
    } 
}, { 
    linkedTo: 0, 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}], 

पूर्ण उदाहरण

Answer 3

आप अपने series के लिए एक और scatter साजिश में जोड़ सकते हैं जिसमें विशिष्ट markers: http://jsfiddle.net/ZZ7Kd/135/

Answer 4

आप Renderer.image का उपयोग() चार्ट

http://api.highcharts.com/highcharts#Renderer.image()

Answer 5

मैं एक प्रवेश कोड मैं दूर करने के लिए भूल गया की वजह से संयोग से एक समाधान पाया पर किसी भी स्थान में भी चित्र जोड़ सकते हैं। आप "इस" का उपयोग विधि फ़ॉर्मेटर अंदर डेटा का उपयोग कर सकते हैं:

... 
plotOptions: { 
    series: { 
     dataLabels: { 
      useHTML: true, 
      enabled: true, 
      x: -50, 
      y: -50, 
      formatter: function(){ 
       console.log(this); 
       return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />'; 
      }, 
     } 
    ... 

इस कोड को निश्चित रूप से काम नहीं कर रहा, लेकिन यह विचार आता है, यह नहीं है कि यह? उम्मीद है कि यह मदद करता है!