हाइचार्ट्स

Question

में अदृश्य श्रृंखला के लिए टूलटिप प्रदर्शित करें मैं हाईचार्ट्स का उपयोग करके एक कस्टम टूलटिप प्रदर्शित करने की कोशिश कर रहा हूं। http://jsfiddle.net/jalbertbowdenii/fDNh9/188/

आप चार्ट पर होवर करते हैं, तो आप देख सकते हैं कि टूलटिप केवल श्रृंखला 2 से मूल्यों को होती हैं, न श्रृंखला 1 से (जो अदृश्य है): आप कोड का एक उदाहरण यहां पा सकते हैं। जब आप किंवदंती में "श्रृंखला 1" पर क्लिक करते हैं, तो आप टूलटिप में श्रृंखला 1 के मान देख सकते हैं।

संपादित करें: कोई code प्रतिबद्ध करने के लिए, बस linkrot फिक्सिंग/संपादन नियमों का पालन ...
वहाँ एक टूलटिप में एक अदृश्य श्रृंखला से मूल्यों को प्रदर्शित करने कोई तरीका है?

Answer 1

tooltip: { 
    formatter: function() { 
     var s = '<b>'+ this.x +'</b>'; 
     var chart = this.points[0].series.chart; //get the chart object 
     var categories = chart.xAxis[0].categories; //get the categories array 
     var index = 0; 
     while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays   
     $.each(chart.series, function(i, series) { //loop through series array 
      s += '<br/>'+ series.name +': ' + 
       series.data[index].y +'m';  //use index to get the y value 
     });   
     return s; 
    }, 
    shared: true 
} 

Answer 2

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

formatter: function() { 
    var index = $.inArray(this.x, categories); 
    var s = '<b>'+ this.x +'</b>'; 

    s += '<br/>'+ chart.series[0].name + ': ' + data1[index]; 
    s += '<br/>'+ chart.series[1].name + ': ' + data2[index]; 

    return s; 
} 

Answer 3

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

यहाँ मैं क्या किया है: "। पारदर्शी"

1. पहले, मैं अदृश्य श्रृंखला के लिए की लाइन रंग सेट
2. अगला, मैंने अदृश्य श्रृंखला मार्करों के लिए "पारदर्शी" भरने के रंग को सेट किया।
3. अंत में, मैंने मार्करों के लिए होवर राज्य अक्षम कर दिया। यह चमकदार हाइलाइट सर्कल को दिखाई देने से रोकता है क्योंकि आप दृश्यमान श्रृंखला में प्रत्येक बिंदु पर अपना माउस कर्सर ले जाते हैं। http://jsfiddle.net/brightmatrix/fDNh9/184/

   series: [{ 
       data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
       lineColor: 'transparent',  // make the line invisible 
       marker: { 
        fillColor: 'transparent', // make the line markers invisible 
        states: { 
         hover: { 
          enabled: false  // prevent the highlight circle on hover 
         } 
        } 
       } 
   }, { 
       data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 
   }] 
   

   दो आइटम गौर करने योग्य:

   1. मैं अन्य अदृश्य श्रृंखला के साथ विशेषता enableMouseTracking: false का उपयोग किया है को रोकने के लिए

   यहाँ इन परिवर्तनों के साथ अपने मूल बेला का एक संशोधित संस्करण है उपयोगकर्ता उनके साथ बातचीत करने (दृश्य प्रभाव प्राप्त करने के लिए)। यदि आप इसे अपनी अदृश्य श्रृंखला के लिए सेट करते हैं, तो यह श्रृंखला टूल को आपके टूलटिप में दिखाई देने से रोक देगा।

4. यदि आप अपनी अदृश्य श्रृंखला को किंवदंती में दिखने से रोकना चाहते हैं, तो आप विशेषता showInLegend: false जोड़ सकते हैं। इसका डेटा अभी भी टूलटिप में दिखाया जाएगा।

मुझे उम्मीद है कि यह इस प्रश्न में आने वाले अन्य लोगों की सहायता करेगा।

Answer 4

उत्तर के लिए बहुत देर हो चुकी है, लेकिन मैंने यही किया। चार्ट प्लॉट करें और रंग पारदर्शी बनाएं। इसे विपरीत वाई धुरी पर प्लॉट किया गया और अधिकतम से शून्य पर सेट किया गया। गलत करने के लिए alignTicks सेट करें। कुछ इस तरह।

chart: { 
     alignTicks: false, 
     type: 'line' 
    }, 

तब एकमात्र चीज टूलटिप फॉर्मेटर में रंग मान बदलने के लिए है क्योंकि लेबल पारदर्शी होगा।

उम्मीद है कि यह किसी की मदद करेगा।

हैप्पी लर्निंग :)