Flot स्टैक्ड बार चार्ट और मैं Flot की टूलटिप कार्यक्षमता को समझने के लिए कोशिश कर रहा हूँ, लेकिन वास्तव में इसके चारों ओर मेरे सिर हो रही नहीं

Question

पर माउस पर बार मूल्यों को प्रदर्शित!

मैं एक टूलटिप कि लेबल और एक स्टैक्ड बार चार्ट

कोई इस का एक उदाहरण की ओर मेरी बात या ऐसा करने के लिए कोड प्रदान करने में सक्षम नहीं होगा के प्रत्येक अनुभाग के मूल्य को प्रदर्शित करता है को प्राप्त करने की कोशिश कर रहा हूँ?

Answer 1

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

var previousPoint = null; 
$("#chart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint != item.datapoint) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, y + " " + item.series.label); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = null;    
    } 
}); 

मैं Flot दस्तावेज में यह भी नहीं मिला है, लेकिन item.datapoint सरणी शामिल करने के लिए कि मैं क्या व्यवहार में की जरूरत लग रहा था।

Answer 2

कोड ऊपर मेरे लिए पुनः बनाने-मुद्दों का कारण बना।

var previousPoint = [0,0,0]; 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint[0] != item.datapoint[0] 
      || previousPoint[1] != item.datapoint[1] 
      || previousPoint[2] != item.datapoint[2] 
     ) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0)); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = [0,0,0]; 
    } 
}); 

Answer 3

यह, ऊपर थॉमस रूप में ही है, सिवाय इसके कि मैं टूलटिप यह मंडराना कार्रवाई को अवरुद्ध को रोकने के लिए स्थानांतरित कर दिया: यहाँ एक बेहतर कोड है।

var previousPoint = [0,0,0]; 
 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
 
    if (item) { 
 
     if (previousPoint[0] != item.datapoint[0] 
 
      || previousPoint[1] != item.datapoint[1] 
 
      || previousPoint[2] != item.datapoint[2] 
 
     ) { 
 
      previousPoint = item.datapoint; 
 

 
      $("#tooltip").remove(); 
 
      var x = item.datapoint[0], 
 
       y = item.datapoint[1] - item.datapoint[2]; 
 

 
      showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0)); 
 
     } 
 
    } 
 
    else { 
 
     $("#tooltip").remove(); 
 
     previousPoint = [0,0,0]; 
 
    } 
 
});

Answer 4

समाधान tooltipOpts उपयोग कर रहा है ->सामग्री कॉलबैक फ़ंक्शन के साथ विधि ठीक से लेबल को डायनामिक डेटा वापस जाने के लिए।

मैं पता लगा है कि "tooltipOpts" की कॉलबैक फ़ंक्शन पर एक 4 तर्क गुजर वास्तव में यदि आप संपूर्ण डेटा वस्तु है जहाँ से चार्ट/ग्राफ़ से निर्माण किया है देता है। यहां से, आप इस अक्ष के दूसरे तर्क को निकालने के लिए लेबल की अनुक्रमणिका के रूप में एक्स अक्ष लेबल आसानी से निकाल सकते हैं।

उदाहरण:

डाटा वस्तु मैं साजिश कार्य करने के लिए गुजर रही है:

[ 
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] } 
], 
{ 
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' }, 
    colors: ['#fcc100'], 
    series: { shadowSize: 3 }, 
    xaxis: { 
     show: true, 
     font: { color: '#ccc' }, 
     position: 'bottom', 
     ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']] 
    }, 
    yaxis:{ show: true, font: { color: '#ccc' }}, 
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' }, 
    tooltip: true, 
    tooltipOpts: { 
     content: function(data, x, y, dataObject) { 
      var XdataIndex = dataObject.dataIndex; 
      var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
      return y + ' stories created about your page on ' + XdataLabel 
     }, 
     defaultTheme: false, 
     shifts: { x: 0, y: -40 } 
    } 
} 

बार चार्ट उपरोक्त डेटा वस्तु से गाया:

जैसा कि आप छवि पूर्वावलोकन, तर्क पर देख सकते हैं लेबल की सामग्री को रेंडर करने गतिशील वास्तविक डेटा के रूप में प्रयोग किया जाता है यह है:

tooltipOpts: { 
    content: function(data, x, y, dataObject) { 
     var XdataIndex = dataObject.dataIndex; 
     var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
     return y + ' stories created about your page on ' + XdataLabel; 
    }, 
    defaultTheme: false, 
    shifts: { x: 0, y: -40 } 
}