Wie ändert man das Datumsformat in Google Material Design Liniendiagramm?

Ich versuche, ein Liniendiagramm mit Google Material Design zu erstellen. Das Diagramm wird korrekt angezeigt. Ich möchte jedoch das Format des im Diagramm angezeigten Datums ändern.Wie ändert man das Datumsformat in Google Material Design Liniendiagramm?

Ich möchte nur "Monat, Jahr" (z. B. Jun, 1994) Format anstelle des aktuellen Formats, das ist "Monat/Tag/Jahr Stunden: Sekunden" Wie mache ich das?

Auch möchte ich die Breite der Linie erhöhen. Die Option "Linienbreite" funktioniert ebenfalls nicht.

Wie vergrößere ich die Breite des Liniendiagramms? Wie kontrolliere ich auch die Anzahl der Etiketten auf der X-Achse?

Der Code für das Diagramm ist wie folgt.

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>

Quelle

2016-02-12 milan m

dies versuchen ..

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

Quelle

2016-02-12 06:15:22

Seine funktioniert nicht. Das habe ich schon probiert. Ich denke, dieser Codeausschnitt ist für das alte Google-Diagramm und nicht für das Materialdiagramm. –

Was das Datumsformat, das auf der hAxis eingestellt werden, die auch den Hover-Wert ändert .
Keine Notwendigkeit für eine formatter ...

Was lineWidth, diese Option nicht erscheint für Material Charts zu arbeiten, auch mit ...

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>

Quelle

2016-02-12 17:31:33 WhiteHat

versucht, mit einer [style role] (https://developers.google.com/chart/interactive/docs/roles#styrole) die Breite zu ändern, aber das hat auch nicht funktioniert, was mit einem regulären 'LineChart' funktioniert – WhiteHat

versuchte '' emphasis'' Datenrolle, um die Linienbreite zu erhöhen, kein Glück. 'hAxis.ticks' funktioniert, um die Anzahl der Labels zu kontrollieren, aber auch hier scheint es nicht auf 'Material' Charts zu funktionieren, versuchte Versionen '' 41 '' durch' 'current'' ... – WhiteHat

Sie können Ihr Format in den hAxis-Optionen während des Zeichnens des Diagramms

einstellen

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

Arbeitsbeispiel https://jsfiddle.net/api/post/library/pure/

Quelle

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

Im convert Datumsfunktion können Sie das Format Ihrer Datum ändern, wie Sie in der Ausgabe erfordern

Quelle

2016-02-22 06:55:23

Wie ändert man das Datumsformat in Google Material Design Liniendiagramm?

Antwort

Verwandte Themen