Jak zmienić format daty na wykresie linii materiałowej google?

Question

Próbuję utworzyć wykres liniowy za pomocą projektu materiałowego google. Wykres jest wyświetlany poprawnie, ale chcę zmienić format daty pokazanej na wykresie.

Chcę tylko "Miesiąc, rok" (np. Jun, 1994) format zamiast bieżącego formatu, który jest "Miesiąc/dzień/rok Godziny: Sekundy" Jak to zrobić?

Chciałbym również zwiększyć szerokość linii. Opcja "linewidth" również nie działa.

Jak zwiększyć szerokość wykresu liniowego? Ponadto, Jak kontrolować liczbę etykiet na osi X?

Kod wykresu pokazano poniżej.

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

spróbować ..

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

Answer 2

Na dzień formacie, który można ustawić na hAxis, który zmienia wartość aktywowanych także .
Nie potrzeba formatter ...

chodzi o lineWidth, że opcja nie wydaje się działać widłowych Charts, nawet z ...

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

Możesz ustawić swój format w opcjach hAxis podczas rysowania wykresu

ex

// 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); 

przykład roboczych https://jsfiddle.net/api/post/library/pure/

Answer 4

Try To

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' 
}); 

w funkcji data konwersji można zmienić format datą, jak wymagają w wyjściu