Come modificare il formato della data nel grafico a linee di design di materiale di Google?

Sto provando a creare un grafico a linee utilizzando il materiale di design di Google. Il grafico viene visualizzato correttamente tuttavia, voglio cambiare il formato della data mostrata sul grafico.Come modificare il formato della data nel grafico a linee di design di materiale di Google?

voglio solo "Mese, Anno" (ad esempio Jun, 1994) formato invece del formato attuale, che è "mese/giorno/anno Ore: Secondi" Come posso fare questo?

Inoltre, vorrei aumentare la larghezza della linea. Anche l'opzione "linewidth" non funziona.

Come si aumenta la larghezza del grafico a linee? Inoltre, come posso controllare il numero di etichette sull'asse x?

Il codice per il grafico è come mostrato di seguito.

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>

fonte

2016-02-12 milan m

provare questo ..

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

fonte

2016-02-12 06:15:22

sua non funziona. L'ho già provato. Penso che questo snippet di codice sia per il vecchio grafico di Google e non per il grafico dei materiali. –

Per quanto riguarda il formato della data, che può essere impostato sul hAxis, che cambia il valore hover pure .
Non c'è bisogno di un formatter ...

Per quanto riguarda lineWidth, tale opzione non sembra funzionare per i grafici del materiale, anche con ...

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>

fonte

2016-02-12 17:31:33 WhiteHat

ha provato a utilizzare un [ruolo stile] (https://developers.google.com/chart/interactive/docs/roles#stylerole) per modificare la larghezza ma non ha funzionato, che funziona su un normale 'LineChart' – WhiteHat

ha provato il ruolo dei dati "enfasi" per aumentare la larghezza della linea, senza fortuna. 'hAxis.ticks' funziona per controllare il numero di etichette, ma, di nuovo, non sembra funzionare sui grafici 'Materiale', versioni provate' '41'' attraverso '' corrente'' ... – WhiteHat

È possibile impostare il formato nelle opzioni hAxis mentre si disegna il grafico

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

esempio Lavorare https://jsfiddle.net/api/post/library/pure/

fonte

2016-02-22 06:36:23

Try This

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

Nella funzione di data convertito è possibile modificare il formato della data, come si richiede in uscita

fonte

2016-02-22 06:55:23

Come modificare il formato della data nel grafico a linee di design di materiale di Google?

risposta

Problemi correlati