Podsumowanie: Dokumentacja dotycząca używania kluczy na wykresach. Klucze mogą być używane, gdy masz (na przykład) wiele zestawów danych, które muszą być zidentyfikowane. Interaktywne klucze mogą to dodatkowo poprawić
- Wprowadzenie
- Właściwości konfiguracji klucza
- Aktywne elementy klucza
- Używanie interaktywnych kluczy na twoich wykresach
- KluczeHTML
.
Wprowadzenie
Użycie klucza na wykresie pozwala na dostarczenie informacji o tym, co reprezentują zestawy danych, które są wyświetlane na wykresie.
Klucze mogą być używane w dwóch różnych trybach – poziomym, przeznaczonym do umieszczenia w marginesach wykresu, i pionowym, przeznaczonym do umieszczenia nad wykresem.
Właściwości konfiguracji klawiszy
Dostępne właściwości klawiszy i ich wartości domyślne są wymienione poniżej (niektóre typy wykresów mają nieco inne wartości domyślne):
Właściwości klucza
| Właściwość | Opis | Default |
|---|---|---|
| Klucz | Tablica elementów klucza (jest to tekst, który jest wyświetlany w kluczu. | (pusta tablica) |
| keyHalign | Poziome wyrównanie klucza | prawe |
| keyPosition | Określa położenie/układ klucza. Możliwe wartości to graph i margin. | graph |
| keyPositionMarginBoxed | Gdy klucz jest w trybie margin, określa to, czy znajduje się w ramce. | false |
| keyPositionGraphBoxed | Gdy klucz jest w trybie graph, określa to, czy znajduje się w ramce. | true |
| keyPositionX | To pozwala określić współrzędną X dla klucza. | null |
| keyPositionY | To pozwala określić współrzędną Y dla klucza. | null |
| keyShadow | To kontroluje, czy klucz ma cień, czy nie. | false |
| keyShadowOffsetx | To kontroluje przesunięcie X dla cienia. | 2 |
| keyShadowOffsety | To kontroluje przesunięcie Y dla cienia. | 2 |
| keyShadowColor | To kontroluje kolor cienia. | #666 |
| keyShadowBlur | To kontroluje rozmycie, które jest stosowane do cienia. | 3 |
| keyColors | Jeśli obliczone kolory nie są tym, co chcesz zobaczyć – to pozwala określić własne kolory. | null |
| keyColorShape | To jest kształt, jaki przybiera plama koloru. | square (może być tablicą kształtów) |
| keyBackground | Tło klucza. | white |
| keyRounded | Czy rogi klucza są kwadratowe czy zaokrąglone. | true |
| keyLinewidth | Szerokość linii używana dla klucza. | 1 |
| keyLabelsFont | Czcionka użyta dla tekstu klucza. | |
| keyLabelsSize | Rozmiar tekstu w kluczu. | |
| keyLabelsColor | Kolor tekstu w kluczu. | black |
| keyLabelsBold | Czy tekst w kluczu jest pogrubiony czy nie. | false |
| keyLabelsItalic | Czy tekst w kluczu jest kursywą, czy nie. | false |
| keyLabelsOffsetx | Przesunięcie, które zostanie zastosowane do współrzędnej X do tekstu klucza. | 0 |
| keyLabelsOffsety | Przesunięcie, które zostanie zastosowane do współrzędnej Y tekstu klucza. | 0 |
| keyTextAccessible | Domyślnie tekst klucza NIE JEST dostępny, ale za pomocą tego ustawienia można to zmienić. | null |
| keyInteractive | Czy klucz jest interaktywny czy nie. Nie wszystkie typy wykresów to obsługują. | false |
| keyInteractiveHighlightChartFill | Kolor wypełnienia podświetlenia używany do podświetlenia wykresu przez klucz interaktywny. | rgba(255,255,255,0.7) |
| keyInteractiveHighlightChartStroke | Kolor obrysu podświetlenia używany do podświetlenia wykresu przez klucz interaktywny. | black |
Tablica elementów key (jest to tekst wyświetlany w key.
Default: (pusta tablica)
keyHalign
Poziome wyrównanie klucza
Domyślnie: right
keyPosition
Określa położenie/układ klucza. Możliwe wartości to graph i margin.
Default: graph
keyPositionMarginBoxed
Gdy klucz jest w trybie margin, to określa czy siedzi w pudełku.
Default: false
keyPositionGraphBoxed
Gdy klucz jest w trybie graph, to określa czy siedzi w pudełku.
Default: true
keyPositionX
To pozwala określić współrzędną X dla klucza.
Default: null
keyPositionY
To pozwala określić współrzędną Y dla klucza.
Default: null
keyShadow
To kontroluje, czy klucz ma cień, czy nie.
Default: false
keyShadowOffsetx
Tu kontroluje przesunięcie X dla cienia.
Default: 2
keyShadowOffsety
Tu kontroluje przesunięcie Y dla cienia.
Default: 2
keyShadowColor
Tu kontroluje kolor cienia.
Default: #666
keyShadowBlur
To kontroluje rozmycie, które jest zastosowane do cienia.
Default: 3
keyColors
Jeśli obliczone kolory nie są tym, co chcesz zobaczyć – to pozwala określić własne kolory.
Default: null
keyColorShape
To jest kształt, jaki przybiera plama koloru.
Default: square (może być tablicą kształtów)
keyBackground
Tło klucza.
Default: white
keyRounded
Czy rogi klucza są kwadratowe czy zaokrąglone.
Domyślnie: true
keyLinewidth
Szerokość linii używana dla klucza.
Domyślnie: 1
keyLabelsFont
Czcionka używana dla tekstu klucza.
Domyślnie:
keyLabelsSize
Rozmiar tekstu w kluczu.
Domyślnie:
keyLabelsColor
Kolor tekstu w kluczu.
Domyślnie: czarny
keyLabelsBold
Czy tekst w kluczu jest pogrubiony czy nie.
Default: false
keyLabelsItalic
Czy tekst w kluczu jest kursywą czy nie.
Default: false
keyLabelsOffsetx
Przesunięcie, które zostanie zastosowane do współrzędnej X do tekstu klucza.
Default: 0
keyLabelsOffsety
Przesunięcie, które zostanie zastosowane do współrzędnej Y tekstu klucza.
Default: 0
keyTextAccessible
Domyślnie tekst klucza NIE JEST dostępny, ale używając tego ustawienia można to zmienić.
Default: null
keyInteractive
Czy klucz jest interaktywny czy nie. Nie wszystkie typy wykresów to obsługują.
Domyślnie: false
keyInteractiveHighlightChartFill
Kolor wypełnienia podświetlenia używany do podświetlenia wykresu za pomocą klawisza interaktywnego.
Domyślnie: rgba(255,255,255,0.7)
keyInteractiveHighlightChartStroke
Kolor obrysu podświetlenia używany do podświetlenia wykresu za pomocą interaktywnego klucza.
Domyślnie: czarny
Aktywne elementy klucza
Kiedy najedziesz lub klikniesz na kluczowy element/wpis, rejestr RGraph będzie zawierał szczegóły odpowiedniego wpisu klucza. Tak więc w swoim listerze zdarzeń będziesz mógł określić kluczowy wpis w ten sposób:
key = RGraph.Registry.get('key-element');
I mógłbyś użyć tego w ten sposób:
// 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); }};
Używanie interaktywnych kluczy na Twoich wykresach
textAccessible, jeśli chcesz, ale klucz interaktywny będzie go ignorował. Dawniej klucz interaktywny był zaimplementowany tylko dla wykresów liniowych i kołowych. Od połowy 2013 roku został on jednak przepisany i jest teraz dostępny z wieloma innymi typami wykresów. Strony demonstracyjne dla klucza interaktywnego są dostępne w archiwum pobierania.
Po przepisaniu klucz interaktywny używa teraz obiektu API rysowania Rect i biblioteki dynamicznej:
<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>
Klucze HTML
W grudniu 2013 roku do RGraph została dodana funkcja, która pozwala na użycie obok wykresu klucza opartego na HTML. Ten klucz składa się z tagów DIV i SPAN, więc możesz uznać go za łatwiejszy do interakcji. Możesz przeczytać więcej o kluczach HTML na tej stronie.