Google सामग्री डिज़ाइन लाइन चार्ट में दिनांक प्रारूप कैसे बदलें?

Question

मैं Google सामग्री डिज़ाइन का उपयोग करके एक लाइन चार्ट बनाने की कोशिश कर रहा हूं। चार्ट सही तरीके से प्रदर्शित हो रहा है, हालांकि, मैं चार्ट पर दिखाए गए दिनांक का प्रारूप बदलना चाहता हूं।

मुझे केवल "महीना, वर्ष" (उदाहरण के लिए जून, 1 99 4) प्रारूप वर्तमान प्रारूप के बजाय प्रारूप "माह/दिन/वर्ष का समय: सेकेंड" है, मैं यह कैसे कर सकता हूं?

इसके अलावा, मैं लाइन की चौड़ाई को बढ़ाना चाहता हूं। "लाइनविड्थ" विकल्प भी काम नहीं कर रहा है।

मैं लाइन चार्ट की चौड़ाई कैसे बढ़ा सकता हूं? साथ ही, मैं एक्स-अक्ष पर लेबल की संख्या को कैसे नियंत्रित करूं?

चार्ट के लिए कोड नीचे दिखाया गया है।

google.charts.load('current', { 
 
    'packages': ['line'] 
 
}); 
 

 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Year'); 
 
    data.addColumn('number', 'DataSize'); 
 
    data.addRows(22); 
 
    data.setValue(0, 0, new Date('1994-01-01')); 
 
    data.setValue(0, 1, 25506); 
 
    data.setValue(1, 0, new Date('1994-02-01')); 
 
    data.setValue(1, 1, 26819); 
 
    data.setValue(2, 0, new Date('1994-03-01')); 
 
    data.setValue(2, 1, 31685); 
 
    data.setValue(3, 0, new Date('1994-04-01')); 
 
    data.setValue(3, 1, 25611); 
 
    data.setValue(4, 0, new Date('1994-05-01')); 
 
    data.setValue(4, 1, 29976); 
 
    data.setValue(5, 0, new Date('1994-06-01')); 
 
    data.setValue(5, 1, 32590); 
 
    data.setValue(6, 0, new Date('1994-07-01')); 
 
    data.setValue(6, 1, 33309); 
 
    data.setValue(7, 0, new Date('1994-08-01')); 
 
    data.setValue(7, 1, 35825); 
 
    data.setValue(8, 0, new Date('1994-09-01')); 
 
    data.setValue(8, 1, 41973); 
 
    data.setValue(9, 0, new Date('1994-10-01')); 
 
    data.setValue(9, 1, 54067); 
 
    data.setValue(10, 0, new Date('1994-11-01')); 
 
    data.setValue(10, 1, 45895); 
 
    var formatter_medium = new google.visualization.DateFormat({ 
 
    formatType: 'medium' 
 
    }); 
 
    formatter_medium.format(data, 1); 
 
    var chart = new google.charts.Line(document.getElementById('dvRise')); 
 
    chart.draw(data, { 
 
    lineWidth: '3', 
 
    left: 0, 
 
    top: 0, 
 
    'height': '300', 
 
    'width': '450', 
 
    colors: ['#44AFED'], 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    hAxis: {} 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div style="text-align: center; height: 320px" id="dvRise"></div>

Answer 1

इस कोशिश ..

var date_formatter = new google.visualization.DateFormat({ 
     pattern: "MMM dd, yyyy" 
}); 
date_formatter.format(data_table, 0); 

Answer 2

दिनांक स्वरूप का सवाल है, कि hAxis, जो मंडराना मूल्य में परिवर्तन के साथ-साथ पर सेट किया जा सकता ।
एक formatter के लिए कोई ज़रूरत नहीं ...

lineWidth का सवाल है, उस विकल्प, सामग्री चार्ट के लिए काम करने के लिए भी साथ ... प्रकट नहीं होता है

google.charts.Line.convertOptions

google.charts.load('current', { 
 
    'packages': ['line'] 
 
}); 
 

 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Year'); 
 
    data.addColumn('number', 'DataSize'); 
 
    data.addRows(22); 
 
    data.setValue(0, 0, new Date('1994-01-01')); 
 
    data.setValue(0, 1, 25506); 
 
    data.setValue(1, 0, new Date('1994-02-01')); 
 
    data.setValue(1, 1, 26819); 
 
    data.setValue(2, 0, new Date('1994-03-01')); 
 
    data.setValue(2, 1, 31685); 
 
    data.setValue(3, 0, new Date('1994-04-01')); 
 
    data.setValue(3, 1, 25611); 
 
    data.setValue(4, 0, new Date('1994-05-01')); 
 
    data.setValue(4, 1, 29976); 
 
    data.setValue(5, 0, new Date('1994-06-01')); 
 
    data.setValue(5, 1, 32590); 
 
    data.setValue(6, 0, new Date('1994-07-01')); 
 
    data.setValue(6, 1, 33309); 
 
    data.setValue(7, 0, new Date('1994-08-01')); 
 
    data.setValue(7, 1, 35825); 
 
    data.setValue(8, 0, new Date('1994-09-01')); 
 
    data.setValue(8, 1, 41973); 
 
    data.setValue(9, 0, new Date('1994-10-01')); 
 
    data.setValue(9, 1, 54067); 
 
    data.setValue(10, 0, new Date('1994-11-01')); 
 
    data.setValue(10, 1, 45895); 
 

 
    var chart = new google.charts.Line(document.getElementById('dvRise')); 
 
    chart.draw(data, google.charts.Line.convertOptions({ 
 
    lineWidth: 10, 
 
    left: 0, 
 
    top: 0, 
 
    'height': '300', 
 
    'width': '450', 
 
    colors: ['#44AFED'], 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    hAxis: {format: 'MMM, yyyy'} 
 
    })); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div style="text-align: center; height: 320px" id="dvRise"></div>

Answer 3

चार्ट

ड्राइंग करते समय आप अपना प्रारूप एचएक्सिस विकल्पों में सेट कर सकते हैं

पूर्व

// If the format option matches, change it to the new option, 
      // if not, reset it to the original format. 
      options.hAxis.format === 'M/d/yy' ? 
      options.hAxis.format = 'MMM dd, yyyy' : 
      options.hAxis.format = 'M/d/yy'; 

      chart.draw(data, options); 

कार्य उदाहरण https://jsfiddle.net/api/post/library/pure/

Answer 4

प्रयास करें यह

function convertDate(inputFormat) { 
    function pad(s) { return (s < 10) ? '0' + s : s; } 
    var d = new Date(inputFormat); 
    return [pad(d.getDate()),pad(d.getMonth()+1),d.getFullYear()].join('/'); 
} 
function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('date', 'Year'); 
data.addColumn('number', 'DataSize'); 
data.addRows(22); 
data.setValue(0, 0, convertDate('1994-01-01')); 
data.setValue(0, 1, 25506); 
data.setValue(1, 0, convertDate('1994-02-01')); 
data.setValue(1, 1, 26819); 
data.setValue(2, 0, convertDate('1994-03-01')); 
data.setValue(2, 1, 31685); 
data.setValue(3, 0, convertDate('1994-04-01')); 
data.setValue(3, 1, 25611); 
data.setValue(4, 0, convertDate('1994-05-01')); 
data.setValue(4, 1, 29976); 
data.setValue(5, 0, convertDate('1994-06-01')); 
data.setValue(5, 1, 32590); 
data.setValue(6, 0, convertDate('1994-07-01')); 
data.setValue(6, 1, 33309); 
data.setValue(7, 0, convertDate('1994-08-01')); 
data.setValue(7, 1, 35825); 
data.setValue(8, 0, convertDate('1994-09-01')); 
data.setValue(8, 1, 41973); 
data.setValue(9, 0, convertDate('1994-10-01')); 
data.setValue(9, 1, 54067); 
data.setValue(10, 0, convertDate('1994-11-01')); 
data.setValue(10, 1, 45895); 
var formatter_medium = new google.visualization.DateFormat({ 
formatType: 'medium' 
}); 

परिवर्तित तिथि समारोह में आप अपनी तिथि के प्रारूप बदल सकते हैं जैसा कि आप उत्पादन