Zusammenfassung: Dokumentation zur Verwendung von Schlüsseln in Ihren Diagrammen. Schlüssel können verwendet werden, wenn Sie (zum Beispiel) mehrere Datensätze haben, die identifiziert werden müssen. Interaktive Schlüssel können dies weiter verbessern
- Einführung
- Schlüsselkonfigurationseigenschaften
- Aktive Schlüsselelemente
- Verwendung interaktiver Schlüssel in Ihren Diagrammen
- HTML-Schlüssel
Einführung
Durch die Verwendung eines Schlüssels in einem Diagramm können Sie Informationen darüber bereitstellen, was die Datensätze, die im Diagramm angezeigt werden, darstellen.
Schlüssel können in zwei verschiedenen Modi verwendet werden – ein horizontaler, der am Rand des Diagramms angebracht wird, und ein vertikaler, der über dem Diagramm angebracht wird.
Tastenkonfigurationseigenschaften
Die verfügbaren Tasteneigenschaften und ihre Standardwerte sind unten aufgeführt (einige Diagrammtypen haben leicht abweichende Standardwerte):
Schlüsseleigenschaften
| Eigenschaft | Beschreibung | Standard |
|---|---|---|
| Schlüssel | Ein Array von Schlüsselelementen (dies ist der Text, der im Schlüssel angezeigt wird. | (Ein leeres Array) |
| keyHalign | Die horizontale Ausrichtung der Taste | right |
| keyPosition | Dies bestimmt die Positionierung/Layout der Taste. Mögliche Werte sind graph und margin. | graph |
| keyPositionMarginBoxed | Wenn die Taste im margin-Modus ist, bestimmt dies, ob sie in einem Kasten sitzt. | false |
| keyPositionGraphBoxed | Wenn die Taste im graph-Modus ist, bestimmt dies, ob sie in einem Kasten sitzt. | true |
| keyPositionX | Damit können Sie eine X-Koordinate für die Taste angeben. | null |
| keyPositionY | Damit können Sie eine Y-Koordinate für die Taste angeben. | null |
| keyShadow | Damit wird gesteuert, ob die Taste einen Schatten hat oder nicht. | false |
| keyShadowOffsetx | Dies steuert den X-Versatz für den Schatten. | 2 |
| keyShadowOffsety | Dies steuert den Y-Versatz für den Schatten. | 2 |
| keyShadowColor | Dies steuert die Farbe des Schattens. | #666 |
| keyShadowBlur | Dies steuert den Weichzeichner, der auf den Schatten angewendet wird. | 3 |
| keyColors | Wenn die berechneten Farben nicht dem entsprechen, was Sie sehen möchten, können Sie hier Ihre eigenen Farben angeben. | null |
| keyColorShape | Dies ist die Form, die der Farbklecks annimmt. | Quadrat (kann ein Array von Formen sein) |
| keyBackground | Der Hintergrund der Taste. | Weiß |
| keyRounded | Ob die Ecken der Taste quadratisch oder abgerundet sind. | true |
| keyLinewidth | Die für die Taste verwendete Linienbreite. | 1 |
| keyLabelsFont | Die für den Schlüsseltext verwendete Schriftart. | |
| keyLabelsSize | Die Größe des Textes im Schlüssel. | |
| keyLabelsColor | Die Farbe des Textes in der Taste. | schwarz |
| keyLabelsBold | Ob der Text in der Taste fett ist oder nicht. | false |
| keyLabelsItalic | Ob der Text in der Taste kursiv ist oder nicht. | false |
| keyLabelsOffsetx | Der Offset, der auf die X-Koordinate des Tastentextes angewendet wird. | 0 |
| keyLabelsOffsety | Der Versatz, der auf die Y-Koordinate des Schlüsseltextes angewendet wird. | 0 |
| keyTextAccessible | Standardmäßig ist der Schlüsseltext NICHT zugänglich, aber mit dieser Einstellung können Sie dies außer Kraft setzen. | null |
| keyInteractive | Ob der Schlüssel interaktiv ist oder nicht. Nicht alle Diagrammtypen unterstützen dies. | false |
| keyInteractiveHighlightChartFill | Die Farbe, mit der das Diagramm durch die interaktive Taste hervorgehoben wird. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Die Hervorhebungsfarbe, die zum Hervorheben des Diagramms mit der interaktiven Taste verwendet wird. | black |
Ein Array mit Schlüsselelementen (dies ist der Text, der in der Taste angezeigt wird.
Default: (Ein leeres Array)
keyHalign
Die horizontale Ausrichtung der Taste
Standard: rechts
keyPosition
Dies bestimmt die Positionierung/Layout der Taste. Mögliche Werte sind graph und margin.
Standard: graph
keyPositionMarginBoxed
Wenn sich die Taste im margin-Modus befindet, bestimmt dies, ob sie in einem Kasten sitzt.
Standard: false
keyPositionGraphBoxed
Wenn sich die Taste im graphischen Modus befindet, bestimmt dies, ob sie in einem Kasten sitzt.
Standard: true
keyPositionX
Damit können Sie eine X-Koordinate für die Taste angeben.
Standard: null
keyPositionY
Damit können Sie eine Y-Koordinate für die Taste angeben.
Standard: null
keyShadow
Damit wird gesteuert, ob die Taste einen Schatten hat oder nicht.
Vorgabe: false
keyShadowOffsetx
Dies steuert den X-Offset für den Schatten.
Vorgabe: 2
keyShadowOffsety
Dies steuert den Y-Offset für den Schatten.
Vorgabe: 2
keyShadowColor
Dies steuert die Farbe des Schattens.
Vorgabe: #666
keyShadowBlur
Dies steuert die Unschärfe, die auf den Schatten angewendet wird.
Standard: 3
keyColors
Wenn die berechneten Farben nicht das sind, was Sie sehen wollen – hier können Sie Ihre eigenen Farben angeben.
Standard: null
keyColorShape
Dies ist die Form, die der Farbklecks annimmt.
Standard: quadratisch (kann ein Array von Formen sein)
keyBackground
Der Hintergrund der Taste.
Standard: weiß
keyRounded
Ob die Ecken der Taste quadratisch oder abgerundet sind.
Standard: true
keyLinewidth
Die für die Taste verwendete Linienbreite.
Standard: 1
keyLabelsFont
Die für den Tastentext verwendete Schriftart.
Standard:
keyLabelsSize
Die Größe des Textes in der Taste.
Default:
keyLabelsColor
Die Farbe des Textes in der Taste.
Standard: schwarz
keyLabelsBold
Ob der Text in der Taste fett ist oder nicht.
Standard: false
keyLabelsItalic
Ob der Text in der Taste kursiv ist oder nicht.
Standard: false
keyLabelsOffsetx
Der Offset, der auf die X-Koordinate des Tastentextes angewendet wird.
Standard: 0
keyLabelsOffsety
Der Offset, der auf die Y-Koordinate des Schlüsseltextes angewandt wird.
Standard: 0
keyTextAccessible
Standardmäßig ist der Schlüsseltext NICHT zugänglich, aber mit dieser Einstellung können Sie dies außer Kraft setzen.
Standard: null
keyInteractive
Ob der Schlüssel interaktiv ist oder nicht. Nicht alle Diagrammtypen unterstützen dies.
Standard: false
keyInteractiveHighlightChartFill
Die Füllfarbe, die verwendet wird, um das Diagramm durch die interaktive Taste hervorzuheben.
Standard: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
Die Farbe der Hervorhebung, mit der das Diagramm durch die interaktive Taste hervorgehoben wird.
Standard: schwarz
Aktive Schlüsselelemente
Wenn Sie mit dem Mauszeiger über ein Schlüsselelement/einen Eintrag fahren oder darauf klicken, werden in der RGraph-Registrierung Details zu dem entsprechenden Schlüsseleintrag gespeichert. In Ihrem Event-Listener können Sie also den Schlüsseleintrag wie folgt ermitteln:
key = RGraph.Registry.get('key-element');
Und Sie könnten ihn wie folgt verwenden:
// Assume that the variable is your line chart objectline.canvas.onmousemove = function (e){ var key = RGraph.Registry.get('key-element'); if (key) { // Log the details of the object to the console console.log(key); }};
Verwendung interaktiver Tasten in Ihren Diagrammen
textAccessible aktivieren, wenn Sie wollen, aber die interaktive Taste ignoriert sie. Früher war die interaktive Taste nur für Linien- und Kreisdiagramme implementiert. Ab Mitte 2013 wurde sie jedoch neu geschrieben und ist nun für viel mehr Diagrammtypen verfügbar. Die Demoseiten für die interaktive Taste sind im Downloadarchiv verfügbar.
Nachdem der interaktive Schlüssel neu geschrieben wurde, verwendet er nun das Zeichnungs-API Rect Objekt und die dynamische Bibliothek:
<script src="RGraph.common.core.js"></script><script src="RGraph.common.dynamic.js"></script><script src="RGraph.common.key.js"></script><script src="RGraph.drawing.rect.js"></script><script> line = new RGraph.Line({ id: 'cvs', data: , , ], options: { xaxisLabels: , tickmarksStyle: 'endcircle', linewidth: 3, xaxisTickmarksCount: 12, spline: true, key: , keyPosition: 'margin', keyInteractive: true, textSize: 14 } }).draw();</script>
HTML-Schlüssel
Im Dezember 2013 wurde eine Funktion zu RGraph hinzugefügt, mit der Sie einen HTML-basierten Schlüssel neben Ihrem Diagramm verwenden können. Dieser Schlüssel besteht aus DIV- und SPAN-Tags, so dass Sie ihn leichter bedienen können. Mehr über HTML-Schlüssel erfahren Sie auf dieser Seite.