Übersicht
Hinweis: JavaScript zählt Monate ab null: Januar ist 0, Februar ist 1 und Dezember ist 11. Wenn sich Ihr Kalenderdiagramm um einen Monat unterscheidet, ist dies der Grund dafür.
Ein Kalenderdiagramm ist eine Visualisierung, in der die Aktivität über einen längeren Zeitraum angezeigt wird, z. B. Monate oder Jahre. Sie werden am besten verwendet, wenn Sie veranschaulichen möchten, wie sich die Menge je nach Wochentag oder -trends unterscheidet.
Das Kalenderdiagramm wird möglicherweise in zukünftigen Google Charts-Versionen erheblich überarbeitet.
Kalenderdiagramme werden im Browser mit SVG oder VML gerendert, je nachdem, was für den Browser des Nutzers geeignet ist. Wie bei allen Google-Diagrammen werden in Kalenderdiagrammen Kurzinfos angezeigt, wenn der Nutzer den Mauszeiger auf die Daten bewegt. Und auch die Anrechnung der Einnahmen: Unser Kalenderdiagramm wurde von der D3-Kalendervisualisierung inspiriert.
Ein einfaches Beispiel
Nehmen wir an, wir möchten zeigen, wie sich die Teilnehmerzahlen einer Sportmannschaft während der Saison verändert haben. Mit einem Kalenderdiagramm können wir die Helligkeit verwenden, um die Werte anzugeben und Trends auf einen Blick zu erfassen:
Wenn Sie den Mauszeiger auf die einzelnen Tage bewegen, sehen Sie die zugrunde liegenden Datenwerte.
Laden Sie zum Erstellen eines Kalenderdiagramms das Paket calendar und erstellen Sie dann zwei Spalten: eine für die Datumsangaben und eine für die Werte. Eine optionale dritte Spalte für benutzerdefinierte Stile wird in einer zukünftigen Google Charts-Version hinzugefügt.
Füllen Sie dann Ihre Zeilen wie unten gezeigt mit Datum/Wert-Paaren aus.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
Tage
Jedes Quadrat in einem Kalenderdiagramm steht für einen Tag. Derzeit kann die Farbe der Datenzellen nicht angepasst werden. Dies wird jedoch im nächsten Release von Google Charts geändert.
Wenn alle Datenwerte positiv sind, reichen die Farben von Weiß zu Blau, wobei die tiefsten Blau die höchsten Werte angeben. Negative Datenwerte werden orange dargestellt.
Der Code für diesen Kalender ähnelt dem ersten, außer dass die Zeilen so aussehen:
[ new Date(2013, 9, 4), 10 ],
[ new Date(2013, 9, 5), 3 ],
[ new Date(2013, 9, 7), -1 ],
[ new Date(2013, 9, 8), 2 ],
[ new Date(2013, 9, 12), -1 ],
[ new Date(2013, 9, 13), 1 ],
[ new Date(2013, 9, 15), 1 ],
[ new Date(2013, 9, 16), -4 ],
Sie können die Größe der Tage („Zellen“) mit der Option calendar.cellSize ändern:
Hier haben wir calendar.cellSize in 10 geändert und damit die Tage und somit auch das Diagramm als Ganzes verkleinert.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Tage ohne Datenwerte können mit der Option noDataPattern angepasst werden:
Hier legen wir für color einen hellblauen Farbton und für backgroundColor einen etwas dunkleren Farbton fest:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Mit calendar.cellColor können Sie Farbe, Rahmenbreite und Deckkraft der Zelle festlegen:
Wählen Sie eine Strichfarbe, die sich von monthOutlineColor unterscheidet, oder eine geringe Deckkraft. Das sind die Optionen für das obige Diagramm:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Wenn Sie sich im Diagramm oben auf einen Tag konzentrieren, wird der Rahmen rot hervorgehoben. Sie können dieses Verhalten mit den Optionen calendar.focusedCellColor steuern:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Wochen
Standardmäßig werden die Wochentage mit den ersten Buchstaben von Sonntag bis Samstag gekennzeichnet.
Sie können die Reihenfolge der Tage nicht ändern, aber mit der Option calendar.daysOfWeek können Sie ändern, welche Buchstaben verwendet werden. Außerdem kannst du mit calendar.dayOfWeekRightSpace den Abstand zwischen den Wochentagen und dem Diagramm steuern und den Textstil mit calendar.dayOfWeekLabel anpassen:
Hier ändern wir die Schriftart der Wochenlabels, fügen zwischen den Labels und den Diagrammdaten einen Abstand von zehn Pixeln ein und beginnen die Wochen am Montag.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#1a8763',
bold: true,
italic: true,
},
dayOfWeekRightSpace: 10,
daysOfWeek: 'DLMMJVS',
}
};
Monate
Standardmäßig werden Monate durch dunkelgraue Linien gekennzeichnet. Mit der Option calendar.monthOutlineColor können Sie die Rahmenlinien steuern, mit calendar.monthLabel die Schriftart des Labels und mit calendar.underMonthSpace den Labelabstand:
Wir haben die Labelschriftart auf eine dunkelrote 12-pt-römisch-kursiv gesetzt, die Umrisse auf dieselbe Farbe gesetzt und einen Abstand von 16 Pixeln hinzugefügt. Die nicht verwendeten Monatsumrisse sind farblich gekennzeichnet.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#981b48',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
},
underMonthSpace: 16,
}
};
Jahre
Die Jahre in Kalenderdiagrammen befinden sich immer am linken Rand des Diagramms und können mit calendar.yearLabel und calendar.underYearSpace angepasst werden:
Wir haben die Schrift für das Jahr auf einen dunkelgrünen 32 pt fett-kursiv dargestellt und fügen zwischen den Jahreslabels und dem unteren Teil des Diagramms zehn Pixel hinzu:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
underYearSpace: 10, // Bottom padding for the year labels.
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
}
}
};
Wird geladen
Der Paketname google.charts.load lautet "calendar":
google.charts.load("current", {packages: ["calendar"]});
Der Klassenname der Visualisierung lautet google.visualization.Calendar:
var visualization = new google.visualization.Calendar(container);
Datenformat
Zeilen:Jede Zeile der Tabelle steht für ein Datum.
Columns:
| Spalte 0 | Spalte 1 | ... | Spalte N (optional) | |
|---|---|---|---|---|
| Zweck: | Wann? | Werte | ... | Optionale Rollen |
| Datentyp: | Datum, Datum oder Uhrzeit | Zahl | ... | |
| Rolle: | Domain | Daten | ... | |
| Optionale Spaltenrollen: | – |
– |
... |
Konfigurationsoptionen
| Name | |
|---|---|
| calendar.cellColor |
Mit der Option
var options = {
calendar: {
cellColor: {
stroke: 'red', // Color the border of the squares.
strokeOpacity: 0.5, // Make the borders half transparent.
strokeWidth: 2 // ...and two pixels thick.
}
}
};
Type: Objekt
Standard:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellSize |
Die Größe der Quadrate des Kalendertags:
var options = { calendar: { cellSize: 10 } };
Typ: Ganzzahl
Standard: 16
|
| calendar.dayOfWeekLabel |
Steuert den Schriftstil der Wochenlabels oben im Diagramm:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Type: Objekt
Standard:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.dayOfWeekRightSpace |
Der Abstand zwischen dem rechten Rand der Wochenlabels und dem linken Rand der Quadrate des Diagrammtags. Typ: Ganzzahl
Standard: 4
|
| calendar.daysOfWeek |
Die aus einem Buchstaben bestehenden Labels für Sonntag bis Samstag. Typ: String
Standard:
'SMTWTFS' |
| calendar.fokusCellFarbe |
Wenn der Nutzer den Fokus über ein Tagesquadrat bewegt, indem er den Mauszeiger darüber bewegt, wird das Quadrat in den Kalenderdiagrammen hervorgehoben.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Type: Objekt
Standard:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Stil für die Monatslabels, z.B.:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Type: Objekt
Standard:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Monate mit Datenwerten werden von anderen durch einen Rahmen in diesem Stil abgegrenzt.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
Weitere Informationen finden Sie unter calendar.unusedMonthOutlineColor.
Type: Objekt
Standard:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Die Anzahl der Pixel zwischen den Labels für den unteren Rand des Monats und dem Quadrat oben am Tag: var options = { calendar: { underMonthSpace: 12 } };
Typ: Ganzzahl
Standard: 6
|
| Kalender.underYearSpace |
Die Anzahl der Pixel zwischen dem Label für das unterste Jahr und dem unteren Teil des Diagramms: var options = { calendar: { underYearSpace: 2 } };
Typ: Ganzzahl
Standard: 0
|
| calendar.unusedMonthOutlineColor (Kalender.unusedMonthOutlineColor) |
Monate ohne Datenwerte werden von anderen durch einen Rahmen in diesem Stil getrennt.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
Weitere Informationen finden Sie unter calendar.monthOutlineColor.
Type: Objekt
Standard:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| colorAxis |
Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder einer Farbverlaufsskala angibt. Um Eigenschaften dieses Objekts anzugeben, können Sie die Objektliteralschreibweise verwenden, wie hier gezeigt: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Type: Objekt
Standard: null
|
| colorAxis.colors |
Farben, die den Werten in der Visualisierung zugewiesen werden Ein String-Array, bei dem jedes Element ein HTML-Farbstring ist, zum Beispiel Typ: Array mit Farbstrings
Standard: null
|
| colorAxis.maxValue-Wert |
Falls vorhanden, wird ein Maximalwert für Diagrammfarbdaten angegeben. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich Typ:Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
|
| colorAxis.minWert |
Falls vorhanden, wird ein Mindestwert für Diagrammfarbdaten angegeben. Farbdatenwerte dieses Werts und darunter werden als erste Farbe im Bereich Typ:Zahl
Standard:Mindestwert der Farbspalte in Diagrammdaten
|
| colorAxis.values |
Steuert, wie vorhanden, wie Werte mit Farben verknüpft werden. Jeder Wert wird der entsprechenden Farbe im Array Typ:Zahlenarray
Standard: null
|
| forceIFrame |
Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet. Typ: Boolesch
Standard: false
|
| height |
Höhe des Diagramms in Pixeln. Typ: Zahl
Standard: Höhe des beinhaltenden Elements
|
| noDataPattern |
Kalenderdiagramme verwenden ein gestreiftes diagonales Muster, um anzuzeigen, dass für einen bestimmten Tag keine Daten vorhanden sind. Verwenden Sie die Optionen
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Type: Objekt
Standard: null
|
| tooltip.isHtml |
Auf Hinweis: Die Anpassung der HTML-Kurzinfos über die Datenrolle der Kurzinfo-Spalte wird von den Kreisdiagrammen und Blasendiagrammen nicht unterstützt. Typ: Boolesch
Standard: true
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard: Breite des beinhaltenden Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Im Diagramm sind weitere Methodenaufrufe erst möglich, nachdem das Ereignis Rückgabetyp: Keine
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das links, oben, breit und hoch des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie diese Methode auf, nachdem das Diagramm gezeichnet wurde. Return Type: Objekt für die Rückgabe
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Auswählbare Elemente sind Balken, Einträge in Legenden und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie für eine Zeile (Spaltenindex ist null).
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp: Array von Auswahlelementen
|
setSelection() |
Die angegebenen Diagrammentitäten werden ausgewählt. Die vorherige Auswahl wird abgebrochen.
Auswählbare Elemente sind Balken, Einträge in Legenden und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, einem Legendeneintrag für eine Spalte (Zeilenindex ist null) und einer Kategorie für eine Zeile (Spaltenindex ist null).
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Rückgabetyp: Keine
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt Eigenschaften: ID, Nachricht
|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf eine visuelle Entität bewegt Gibt den Zeilenindex und den Datumswert der Entität zurück. Wenn für die Entität kein Datentabellenelement vorhanden ist, wird für den Zeilenindex der Wert Attribute: Zeile, Datum
|
onmouseout |
Wird ausgelöst, wenn der Nutzer die Maus von einer visuellen Entität wegbewegt Gibt den Zeilenindex und Datumswert der Entität zurück. Wenn für die Entität kein Datentabellenelement vorhanden ist, wird für den Zeilenindex der Wert Zeile Properties, Datum
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden nach dem Zeichnen aufrufen möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften: Keine
|
select |
Wird ausgelöst, wenn der Nutzer auf ein visuelles Element klickt. Rufen Sie Eigenschaften:Keine
|
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.