हजारों

Question

के बजाय Google चार्ट "K" डेटा प्रदर्शित करने के लिए मैं Google चार्ट टूल (https://developers.google.com/chart/) का उपयोग कर रहा हूं, कभी-कभी मेरे मान वास्तव में उच्च (100.000+) होते हैं।

मेरे ग्राफ आयामों में बहुत छोटे हैं और 100.000 फिट नहीं हैं, लेकिन 100k होगा। क्या कोई तरीका है कि मैं "के" में vAxis पर संख्याओं को प्रदर्शित करने के लिए vAxis को कॉन्फ़िगर कर सकता हूं यदि 10k से अधिक मान हैं?

Answer 1

Google विज़ुअलाइजेशन ICU Decimal Format का सबसेट का उपयोग करता है, जिसे DataView या vAxis.format के साथ सेट किया जा सकता है।

दुर्भाग्य से, उस सबसेट में 1,000 से विभाजित करने की क्षमता शामिल नहीं है। तो आपको पहले अपने डेटा में हेरफेर करने की आवश्यकता होगी। मान लें कि यह आपके डेटा है:

var data = google.visualization.arrayToDataTable([ 
    ['x', 'Data'], 
    ['A', 123456], 
    ['B', 234567], 
    ['C', 456789], 
    ['D', 890123], 
    ['E', 789012], 
    ['F', 789012], 
    ['G', 890123], 
    ['H', 456789], 
    ['I', 234567], 
    ['J', 345678], 
    ['K', 345678], 
    ['L', 345678], 
    ['M', 123456], 
    ['N', 123456] 
    ]); 

हम डेटा क्लोन करने के लिए, और उसके बाद 1000 से प्रत्येक बिंदु को विभाजित की जरूरत है।

var formattedData = data.clone(); 
    for (var i = 0; i < formattedData.getNumberOfRows(); i++) { 
    var dataPoint = formattedData.getValue(i, 1); 
    formattedData.setValue(i, 1, dataPoint/1000); 
    } 

हम तो इस चार्ट और के रूप में प्रारूप निर्धारित कर सकते हैं:: यहाँ करने के लिए एक आसान तरीका है vAxis: {format: "#,###k"} - लेकिन वहाँ एक समस्या है। अब जब आप श्रृंखला को माउसओवर करते हैं, तो आप देखते हैं कि 890,123 890.123 के रूप में प्रदर्शित होता है! यह अच्छा नहीं है, तो हम है कि ठीक करने के लिए पाश के लिए एक और पंक्ति जोड़कर की जरूरत है:

var formattedData = data.clone(); 
    for (var i = 0; i < formattedData.getNumberOfRows(); i++) { 
    var dataPoint = formattedData.getValue(i, 1); 
    formattedData.setValue(i, 1, dataPoint/1000); 
    formattedData.setFormattedValue(i, 1, dataPoint.toString()); 
    } 

इस डेटा 890,123 की तरह लग कर देगा, लेकिन साजिश के रूप में 890.123 इसलिए अक्ष अच्छा लगता है। यदि आप अल्पविराम जोड़ना चाहते हैं, तो ऐसे संसाधन हैं जैसे this और this यदि आप चाहें तो आप इसका उपयोग कर सकते हैं। मैं आपके डेटा प्रारूप को नहीं जानूंगा, इसलिए यदि आप हजारों विभाजक, या दशमलव, या जब भी आप माउस को चार्ट करते हैं तो मैं आपको उस हिस्से को अपने आप से बाहर कर दूंगा।

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Data'], 
    ['A', 123456], 
    ['B', 234567], 
    ['C', 456789], 
    ['D', 890123], 
    ['E', 789012], 
    ['F', 789012], 
    ['G', 890123], 
    ['H', 456789], 
    ['I', 234567], 
    ['J', 345678], 
    ['K', 345678], 
    ['L', 345678], 
    ['M', 123456], 
    ['N', 123456] 
    ]); 

    // Clone data and divide by 1,000 in column 1 
    var formattedData = data.clone(); 
    for (var i = 0; i < formattedData.getNumberOfRows(); i++) { 
    var dataPoint = formattedData.getValue(i, 1); 
    formattedData.setValue(i, 1, dataPoint/1000); 
    formattedData.setFormattedValue(i, 1, dataPoint.toString()); 
    } 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(formattedData, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {format: "#,###k"}} 
     ); 
} 

Answer 2

true को displayExactValues विन्यास विकल्प सेट करने का प्रयास करें:

एक छोटा दिखाए जाएं या नहीं, ग्राफ के शीर्ष पर मूल्यों के संस्करण गोल, स्थान बचाने के लिए; झूठा इंगित करता है कि यह हो सकता है। उदाहरण के लिए, यदि गलत पर सेट किया गया है, तो 56123.45 56.12k के रूप में प्रदर्शित किया जा सकता है।

यह आपको वह व्यवहार देना चाहिए जो आपको चाहिए, हालांकि यह आपको उस मूल्य को सेट करने की स्पष्ट क्षमता नहीं देता है जिस पर आप इसे 'के' प्रत्यय का उपयोग करना शुरू करना चाहते हैं।

Answer 3

संक्षेप में,

options['vAxis']['format'] = 'short'; 

Answer 4

Number Formats, आप hAxis.format और vAxis.format साथ लेबल संख्या के स्वरूपण को नियंत्रित कर सकते हैं:

यहाँ अंतिम काम कर कोड है।

उदाहरण के लिए, {hAxis: {format: '#, ###%'}} मूल्य 10, 7.5, और 0.5 के मान "1,000%", "750%", और "50%" प्रदर्शित करता है। आप निम्न में से किसी भी प्रीसेट को भी आपूर्ति कर सकते हैं:

{format: 'none'}: displays numbers with no formatting (e.g., 8000000) 
{format: 'decimal'}: displays numbers with thousands separators (e.g., 8,000,000) 
{format: 'scientific'}: displays numbers in scientific notation (e.g., 8e6) 
{format: 'currency'}: displays numbers in the local currency (e.g., $8,000,000.00) 
{format: 'percent'}: displays numbers as percentages (e.g., 800,000,000%) 
{format: 'short'}: displays abbreviated numbers (e.g., 8M) 
{format: 'long'}: displays numbers as full words (e.g., 8 million)