Übersicht
Hinweis:JavaScript zählt Monate ab null: Januar ist 0, Februar ist 1 und Dezember ist 11. Wenn Ihr Kalenderdiagramm um einen Monat abweicht, ist dies der Grund dafür.
Ein Kalenderdiagramm ist eine Visualisierung, mit der Aktivitäten über einen längeren Zeitraum wie Monate oder Jahre hinweg dargestellt werden. Sie sind am besten geeignet, wenn Sie veranschaulichen möchten, wie eine bestimmte Menge je nach Wochentag variiert oder sich im Laufe der Zeit entwickelt.
Das Kalenderdiagramm wird in zukünftigen Versionen von Google Charts möglicherweise grundlegend überarbeitet.
Kalenderdiagramme werden im Browser mithilfe von SVG oder VML gerendert, je nachdem, was für den Browser des Nutzers geeignet ist. Wie bei allen Google-Diagrammen werden auch bei Kalenderdiagrammen Kurzinfos angezeigt, wenn der Nutzer den Mauszeiger auf die Daten bewegt. Und der Beitrag, der wirklich wichtig ist: Unser Kalenderdiagramm wurde von der D3-Kalendervisualisierung inspiriert.
Ein einfaches Beispiel
Angenommen, wir möchten zeigen, wie sich die Zuschauerzahlen einer Sportmannschaft im Laufe der Saison veränderten. Bei einem Kalenderdiagramm können wir anhand der Helligkeit Werte angeben und Trends auf einen Blick erkennen lassen:
Wenn Sie den Mauszeiger auf die einzelnen Tage bewegen, werden die zugrunde liegenden Datenwerte angezeigt.
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. Für eine zukünftige Version von Google Charts wird eine optionale dritte Spalte für benutzerdefinierte Stile hinzugefügt.
Füllen Sie dann die Zeilen mit Datum/Wert-Paaren, wie unten gezeigt.
<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 repräsentiert einen Tag. Derzeit kann die Farbe der Datenzellen nicht angepasst werden. Dies wird jedoch in der nächsten Version von Google Charts geändert.
Wenn die Datenwerte alle positiv sind, reichen die Farben von Weiß bis Blau, wobei das tiefste Blau die höchsten Werte angibt. Wenn negative Datenwerte vorhanden sind, werden sie wie unten gezeigt orange dargestellt.
Der Code für diesen Kalender ähnelt dem ersten Kalender, außer dass die Zeilen wie folgt 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 ],
Mit der Option calendar.cellSize können Sie die Größe der Tage („Zellen“) ändern:
Hier haben wir calendar.cellSize in 10 geändert, wodurch die Tage und damit das Diagramm als Ganzes verkleinert wurden.
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 ein hellblaues 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 die Farbe, Rahmenbreite und Deckkraft der Zellenrahmen festlegen:
Achten Sie darauf, eine Strichfarbe auszuwählen, die sich von monthOutlineColor unterscheidet, oder eine geringe Deckkraft. Für das Diagramm oben sind folgende Optionen verfügbar:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Wenn Sie den Fokus auf einen Tag im obigen Diagramm legen, wird der Rahmen rot hervorgehoben. Dieses Verhalten können Sie mit den Optionen für 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 beschriftet.
Sie können die Reihenfolge der Tage nicht ändern, aber mit der Option calendar.daysOfWeek ändern, welche Buchstaben verwendet werden. Außerdem können Sie den Abstand zwischen den Wochentagen und dem Diagramm mit calendar.dayOfWeekRightSpace steuern und den Textstil mit calendar.dayOfWeekLabel anpassen:
Hier ändern wir die Schriftart der Wochenlabels, setzen einen Abstand von 10 Pixeln zwischen den Labels und den Diagrammdaten und beginnen die Woche 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
Monate werden standardmäßig durch dunkelgraue Linien gekennzeichnet. Mit der Option calendar.monthOutlineColor können Sie den Rahmen festlegen, mit calendar.monthLabel die Schriftart des Labels und mit calendar.underMonthSpace den Abstand des Labels anpassen:
Wir legen die Schriftart des Labels auf tiefrotes 12pt Times-Roman Fett-kursiver Text fest, legen für die Umrisse dieselbe Farbe fest und legen einen Abstand von 16 Pixeln fest. Für die nicht verwendeten Monatsumrisse wird eine schimmernde Farbe desselben Farbtons verwendet.
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 legen die Jahresschriftart auf eine dunkelgrüne 32pt Times-Roman, Fett-kursive Abstufung fest und fügen zwischen den Jahresbeschriftungen und dem unteren Rand 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 in der Tabelle steht für ein Datum.
Columns:
| Spalte 0 | Spalte 1 | ... | Spalte N (optional) | |
|---|---|---|---|---|
| Zweck: | Daten | Werte | ... | Optionale Rollen |
| Datentyp: | date, datetime oder timeofday | number | ... | |
| 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.
}
}
};
Typ:Objekt
Standard:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellSize |
Die Größe der Kalendertagesquadrate:
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
}
}
};
Typ: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 Tagesquadrate im Diagramm. Typ: Ganzzahl
Standard: 4
|
| calendar.daysOfWeek |
Die aus einzelnen Buchstaben bestehenden Labels, die für Sonntag bis Samstag verwendet werden sollen. Typ: String
Standard:
'SMTWTFS' |
| calendar.focusedCellColor |
Wenn der Nutzer den Fokus (z. B. durch Bewegen des Mauszeigers) auf ein Quadrat für den Tag legt, wird dieses in Kalenderdiagrammen hervorgehoben.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Typ:Objekt
Standard:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Stil der Monatslabels, z.B.:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Typ:Objekt
Standard:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Monate mit Datenwerten werden durch einen Rahmen in diesem Stil von anderen abgegrenzt.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Siehe auch calendar.unusedMonthOutlineColor.)
Typ:Objekt
Standard:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Die Anzahl der Pixel zwischen dem unteren Rand der Monatslabels und dem oberen Rand der Tagesquadrate: var options = { calendar: { underMonthSpace: 12 } };
Typ: Ganzzahl
Standard: 6
|
| calendar.underYearSpace |
Die Anzahl der Pixel zwischen der Jahresbezeichnung ganz unten und dem unteren Rand des Diagramms: var options = { calendar: { underYearSpace: 2 } };
Typ: Ganzzahl
Standard: 0
|
| calendar.unusedMonthOutlineColor |
Monate ohne Datenwerte werden durch einen Rahmen in diesem Stil von anderen abgegrenzt.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Siehe auch calendar.monthOutlineColor.)
Typ:Objekt
Standard:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| colorAxis |
Ein Objekt, das eine Zuordnung zwischen Farbspaltenwerten und Farben oder eine Farbverlaufsskala angibt. Zum Angeben der Eigenschaften dieses Objekts können Sie die Objektliteral-Notation verwenden, wie hier gezeigt: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Typ:Objekt
Standard:null
|
| colorAxis.colors |
Farben, die Werten in der Visualisierung zugewiesen werden sollen. Ein Array mit Strings, wobei jedes Element ein HTML-Farbstring ist. Beispiel: Typ:Array von Farbstrings
Standard:null
|
| colorAxis.maxValue |
Falls vorhanden, gibt es einen Maximalwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als letzte Farbe im Bereich Typ:Zahl
Standard:Maximalwert der Farbspalte in Diagrammdaten
|
| colorAxis.minValue |
Falls vorhanden, gibt es einen Mindestwert für Diagrammfarbdaten an. Farbdatenwerte ab diesem Wert werden als erste Farbe im Bereich Typ:Zahl
Standard:Mindestwert der Farbspalte in Diagrammdaten
|
| colorAxis.values |
Falls vorhanden, wird damit gesteuert, wie Werte mit Farben verknüpft werden. Jeder Wert ist der entsprechenden Farbe im Array Typ:Array von Zahlen
Standard:null
|
| forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in 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 |
In Kalenderdiagrammen wird ein gestreiftes diagonales Muster verwendet, um anzuzeigen, dass für einen bestimmten Tag keine Daten vorhanden sind. Mit den Optionen
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Typ:Objekt
Standard:null
|
| tooltip.isHtml |
Legen Sie Hinweis: Die Anpassung des HTML-Kurzinfoinhalts über die Spalte „Kurzinfo-Spaltendaten“ wird von den Visualisierungen Kreisdiagramm und Blasendiagramm nicht unterstützt. Typ: Boolesch
Standardeinstellung:true
|
| width |
Breite des Diagramms in Pixeln. Typ:Zahl
Standard:Breite des beinhaltenden Elements
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Das Diagramm akzeptiert erst dann weitere Methodenaufrufe, nachdem das Ereignis Return Type: Kein
|
getBoundingBox(id) |
Gibt ein Objekt zurück, das den linken und oberen Rand sowie die Breite und Höhe des Diagrammelements
Die Werte beziehen sich auf den Container des Diagramms. Rufen Sie dies nach dem Zeichnen des Diagramms auf. Rückgabetyp: Objekt
|
getSelection() |
Gibt ein Array der ausgewählten Diagrammentitäten zurück.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag für eine Spalte (Zeilenindex ist null) und eine 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() |
Wählt die angegebenen Diagrammentitäten aus. Verwirft die vorherige Auswahl.
Auswählbare Elemente sind Balken, Legendeneinträge und Kategorien.
Ein Balken entspricht einer Zelle in der Datentabelle, ein Legendeneintrag für eine Spalte (Zeilenindex ist null) und eine Kategorie für eine Zeile (Spaltenindex ist null).
Für dieses Diagramm kann jeweils nur eine Entität ausgewählt werden.
Return Type: Kein
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt. Properties (Eigenschaften): id, message, message
|
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 Eigenschaften: Zeile, Datum
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger von einer visuellen Entität entfernt 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 Zeile Properties, Datum
|
ready |
Das Diagramm ist bereit für externe Methodenaufrufe. Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Properties:keine
|
select |
Wird ausgelöst, wenn der Nutzer auf eine visuelle Entität klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.