Google चार्ट्स का समय-समय पर अक्षरों के अक्षरों का स्वरूपण

Question

मैं एक अक्ष के साथ 'डेटाटाइम' प्रकार के साथ एक रेखा चार्ट खींचने के लिए GoogleCharts का उपयोग कर रहा हूं। मैं अक्ष लेबल को प्रारूपित करना चाहता हूं ताकि वे डिफ़ॉल्ट ब्राउज़र टाइमज़ोन की बजाय निर्दिष्ट समय क्षेत्र में समय प्रदर्शित कर सकें।

प्रलेखन पढ़ने से, DateFormat ऑब्जेक्ट है जिसे 'टाइमज़ोन' विकल्प के साथ आपूर्ति की जा सकती है, और फिर उस कॉलम में सभी कक्षों को प्रारूपित करने के लिए उचित DataTable और कॉलम के साथ बुलाया जाता है। मैंने देखा है कि यह परिणाम उन मानों में कर रहे हैं जो सही ढंग से प्रारूपित हैं यदि DataTable तालिका के रूप में खींचा गया है। हालांकि, यह वही स्वरूपण LineChart या Bar जैसे चार्ट पर धुरी लेबल पर लागू नहीं होता है।

यहाँ मेरी कोड है:

var dataTable = new google.visualization.DataTable(); 

dataTable.addColumn('datetime', 'Time'); 
dataTable.addColumn('number', 'Wolves'); 
dataTable.addRows([ 
    [new Date(2020, 1, 1, 12), 1], 
    [new Date(2020, 1, 1, 13), 3] 
]); 

// Create DateFormat with a timezone offset of -4 
var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); 

// Format the first column 
dateFormat.format(dataTable, 0); 

dataTable.getFormattedValue(0, 0); // "February 1, 2020 at 8:00:00 AM UTC-4" 

var table = new google.visualization.Table(document.getElementById('wolf_table')); 
table.draw(dataTable); 

var lineChart = new google.visualization.LineChart(document.getElementById('wolf_chart')); 
lineChart.draw(dataTable); 

यहाँ जिसके परिणामस्वरूप चार्ट:

नोट कैसे तालिका सही ढंग से, प्रासंगिक कोशिकाओं में बार स्वरूपित जबकि लाइन चार्ट प्रदर्शन ब्राउज़र समय अक्ष (इस मामले में जीएमटी)।

क्या लाइन चार्ट अक्ष लेबल के टाइमज़ोन प्रारूपों को बदलने का कोई तरीका है? क्या ऐसा कुछ है जो मुझे याद आ रहा है?

Answer 1

का उपयोग hAxis.ticksconfiguration option

एक बार डेटा DateFormat

के साथ स्वरूपित किया गया है लेबल प्रदर्शित करने के लिए

उपयोग वस्तु (मूल्य प्रदान करने के अंकन के साथ एक सरणी का निर्माण अक्ष लेबल प्रदान करने के लिए v:) और प्रत्येक लेबल

// Set X-Axis Labels 
var xTicks = []; 
for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
    xTicks.push({ 
    v: dataTable.getValue(i, 0), 
    f: dataTable.getFormattedValue(i, 0) 
    }); 
} 

के लिए स्वरूपित मान ( f:)

आप जरूरी पूरे dataTable,
प्रारूप में तैयार करना नहीं है या आप लेबल है कि dataTable में मौजूद नहीं है, उपयोग करने के लिए
पर DateFormat

// Set X-Axis Labels 
var xTicks = []; 
for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
    xTicks.push({ 
    v: dataTable.getValue(i, 0), 
    f: dateFormat.formatValue(dataTable.getValue(i, 0)) 
    });  
} 

/*** OR ***/  

// custom date, not in dataTable 
var customDate = new Date(2016, 9, 4, 22, 7, 7); 
xTicks.push({ 
    v: customDate, 
    f: dateFormat.formatValue(customDate) 
}); 

अगले कार्य को देखने के formatValue विधि का उपयोग करें चाहते हैं टुकड़ा ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn('datetime', 'Time'); 
 
    dataTable.addColumn('number', 'Wolves'); 
 
    dataTable.addRows([ 
 
     [new Date(2020, 1, 1, 12), 1], 
 
     [new Date(2020, 1, 1, 13), 3] 
 
    ]); 
 

 
    // Create DateFormat with a timezone offset of -4 
 
    var dateFormat = new google.visualization.DateFormat({formatType: 'long', timeZone: -4}); 
 

 
    // Format the first column 
 
    dateFormat.format(dataTable, 0); 
 

 
    // Set X-Axis Labels 
 
    var xTicks = []; 
 
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
 
     xTicks.push({ 
 
     v: dataTable.getValue(i, 0), 
 
     f: dataTable.getFormattedValue(i, 0) 
 
     }); 
 
    } 
 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 
    table.draw(dataTable); 
 

 
    var lineChart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    lineChart.draw(dataTable, { 
 
     hAxis: { 
 
     ticks: xTicks 
 
     } 
 
    }); 
 
    }, 
 
    packages:['corechart', 'table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_div"></div> 
 
<div id="chart_div"></div>