मुद्दा आप चलाना होगा जब इस कार्य के लिए Highcharts का उपयोग करते हुए कि बुलबुले के आकार चार्ट आप वर्तमान में प्रदर्शित कर रहे हैं के लिए विशिष्ट होता है। यदि आप अधिक वास्तविक रूप से बुलबुले के आकार में वृद्धि प्रदर्शित करना चाहते हैं, तो आपको थोड़ा अलग दृष्टिकोण लेना होगा।
मैंने हाल ही में इसे पूरा करने के लिए हाईचर्ट्स और jQuery यूआई लेबल वाले स्लाइडर का संयोजन उपयोग किया।
आप की आवश्यकता होगी:
में Highcharts-मो re.src.js, इस अनुभाग ढूंढें:
for (i = 0, len = zData.length; i < len; i++) {
zRange = zMax - zMin;
pos = zRange > 0 ? // relative size, a number between 0 and 1
(zData[i] - zMin)/(zMax - zMin) :
0.5;
radii.push(math.round(minSize + pos * (maxSize - minSize))/2);
}
और यह साथ बदलें:
plotOptions: {
bubble: {
maxSize: MAXVALUE } }
:
for (i = 0, len = zData.length; i < len; i++) {
radii.push((zData[i]/maxSize)*100);
}
फिर, जब आप Highcharts प्रारंभ आप निम्नलिखित निर्धारित करने की आवश्यकता जहां सभी चार्टों में MAXVALUE उच्चतम मान है।
फिर आप प्रत्येक टिक के आधार पर अपनी पसंदीदा विधि का उपयोग करके चार्ट के डेटा को अपडेट करेंगे। उदाहरण:
$("#slider").labeledslider({
value:0,
min: 0,
max: 7,
step: 1,
slide: function(event, ui) {
adjustHighchart(ui.value);
}
});
यह सुनिश्चित करें कि है कि चार्ट 1 पर एक बुलबुला 100 का एक आकार चार्ट 2 पर एक बुलबुला 200 का एक आकार है, इस स्थिति नहीं होगा अगर आप बस अद्यतन है कि तुलना में छोटी है कर देगा प्रत्येक बार डेटा जब से वर्तमान में प्रदर्शित डेटा के सापेक्ष है।
संभावित बबल चार्टिंग समाधान ... http://jondavidjohn.github.io/bubblechart/ – jondavidjohn