2011-08-31 17 views
37

Flot चार्ट एपीआई दोहरी वी-अक्ष स्केल का समर्थन करता है, जैसा कि this example द्वारा दिखाया गया है।क्या Google चार्ट दोहरी वाई-अक्ष (वी-अक्ष) का समर्थन कर सकता है?

मैं Google चार्ट का उपयोग कर रहा हूं - क्या यह Google के साथ भी संभव है? मैंने उदाहरणों और दस्तावेज़ों के माध्यम से एक नज़र डाली है, लेकिन यह संकेत देने के लिए कोई उदाहरण/संदर्भ नहीं मिल रहा है कि यह दोहरी धुरी चार्ट का समर्थन करता है।

उत्तर

93

इसे समझने में मुझे कुछ समय लगा, लेकिन Google चार्ट समर्थन दोहरी वाई-अक्ष (वी-अक्ष) है। मैं जावास्क्रिप्ट एपीआई का उपयोग करना चाहता हूं, न कि एचटीएमएल इंटरफ़ेस।

यह उदाहरण यहाँ परीक्षण किया जा सकता: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

इस कोड को दिखा दो अलग Y- अक्ष तराजू के लिए कैसे के साथ कि कोड के सभी बदलें:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", 1, 1, 0.5]); 
    data.addRow(["B", 2, 0.5, 1]); 
    data.addRow(["C", 4, 1, 0.5]); 
    data.addRow(["D", 8, 0.5, 1]); 
    data.addRow(["E", 7, 1, 0.5]); 
    data.addRow(["F", 7, 0.5, 1]); 
    data.addRow(["G", 8, 1, 0.5]); 
    data.addRow(["H", 4, 0.5, 1]); 
    data.addRow(["I", 2, 1, 0.5]); 
    data.addRow(["J", 3.5, 0.5, 1]); 
    data.addRow(["K", 3, 1, 0.5]); 
    data.addRow(["L", 3.5, 0.5, 1]); 
    data.addRow(["M", 1, 1, 0.5]); 
    data.addRow(["N", 1, 0.5, 1]); 


    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", width: 500, height: 400, 
    vAxes: {0: {logScale: false}, 
      1: {logScale: false, maxValue: 2}}, 
    series:{ 
     0:{targetAxisIndex:0}, 
     1:{targetAxisIndex:1}, 
     2:{targetAxisIndex:1}}} 
     ); 
} 

कोड को maxValue: 2 को जोड़ कर, और उस धुरी के लिए श्रृंखला 1 & 2 सेट करना, वे दूसरी धुरी पर ठीक से काम करते हैं।

+2

ध्यान दें कि उपर्युक्त उदाहरण दो अलग-अलग वाई-अक्ष स्केल नहीं दिखाता है (यह कहने के बावजूद) क्योंकि दूसरा vAxis अधिकतम वैल्यू पर सेट है: 10, यदि आप दो अधिकतम VAxes को अधिकतम maxValue मानों पर सेट करते हैं तो आप दो अलग-अलग देखेंगे तराजू। –

+0

@JamieKitson उत्तर अब करता है। किसी को इसे संपादित करना चाहिए –

+0

मैंने कोशिश की लेकिन मेरे संपादन अस्वीकार कर दिए गए आईआईआरसी: -/ –

-3

मैंने ऐसा किया। डेटा श्रृंखला

  • पर

    1. क्लिक करें एक छोटे से बॉक्स दूसरा एक

    तो किया जा सकता है पर केवल दो बोल्ड पक्षों प्रत्येक

  • क्लिक के साथ 2 छोटे वर्गों के साथ दिखाई देंगे।

  • +3

    क्या आप अपने उत्तर को स्पष्ट करने के लिए अपना ठोस उदाहरण जोड़ सकते हैं? – m4rtin

    संबंधित मुद्दे