Tworzenie mapy obrazu wykresu

Wstęp

Standardy HTML umożliwiają określanie aktywnych miejsc na obrazie strony internetowej za pomocą mapy obrazu. Te hotspoty mogą służyć do wyświetlania tekstu wyświetlanego po najechaniu kursorem lub działania jako linków. Możesz też dodać obsługę zdarzeń JavaScript, aby umożliwić interaktywność. Możesz np. najechać kursorem na słupki i etykiety osi tego obrazu:

 

Aktywne obszary są tworzone za pomocą elementów HTML <map> i <area>. Interfejs Chart API może zwracać wszystkie współrzędne potrzebne do utworzenia dla niego mapy hotspotu, zgodnie z opisem poniżej.

Tworzenie mapy dla wykresu

Jeśli dodasz parametr chof=json do adresu URL wykresu, otrzymasz ciąg JSON zawierający wszystkie dane potrzebne do utworzenia mapy obrazu na potrzeby wykresu. Możesz dodać linki do wybranych sekcji wykresu lub dołączyć funkcje JavaScript, aby zwiększyć interaktywność wykresu. Pamiętaj, że nie wszystkie typy wykresów obsługują tę funkcję. Szczegółowe informacje znajdziesz w dokumentacji konkretnego wykresu.

Narzędzie na tej stronie pomoże Ci wygenerować kod HTML mapy obrazu. Możesz umieścić ten kod HTML na swojej stronie na stałe lub nawet skopiować na nią nasz kod, a następnie zażądać i wygenerować mapę na bieżąco, jeśli Twoja strona umożliwia użytkownikom dynamiczne zmienianie mapy na stronie.

Aby wygenerować mapę za pomocą tego narzędzia:

  1. Pobierz dane wyjściowe wykresu w formacie JSON: dodaj chof=json do adresu URL wykresu, otwórz ten adres URL w przeglądarce i skopiuj zwrócony tekst.
  2. Wklej skopiowany tekst JSON w polu tekstowym poniżej oznaczonym etykietą „Dane wyjściowe JSON” i kliknij „Utwórz mapę”.
  3. Wklej wygenerowany kod mapy na swojej stronie.
  4. Zaktualizuj wygenerowany kod, nadając unikalną nazwę elementu <map>.
  5. Usuń wszystkie niepotrzebne elementy mapy (np. określone słupki, wycinki, etykiety lub elementy osi).
  6. Zaktualizuj atrybuty href w wygenerowanych elementach <area>.
  7. Dodaj atrybut usemap="#MAP_NAME" do elementu <img>, zastępując nazwę mapy wartością MAP_NAME.

    Ważne: pamiętaj, aby przed wartością usemap umieścić znak „#”, np. usemap="#mymap". W tym przypadku nazwa mapy to „mojamapa”, a nie „#mojamapa”.

 

Format ciągu JSON

Oto format pliku JSON, który jest zwracany, gdy podajesz właściwość chof=json:

  • Obiekt główny o nazwie chartshape. Ten obiekt zawiera tablicę obiektów, z których każdy reprezentuje 1 obszar na mapie obrazu wykresu. Każdy obiekt ma te właściwości:
    • nazwa – nazwa konkretnego obszaru. Ogólna konwencja nazewnictwa to elementtype_series#_item#. Na przykład: słupek0_0 obszaru opisującego pierwszy słupek w pierwszej serii lub oś0_1 dla obszaru opisującego drugą etykietę osi na osi X.
    • typ – kształt obszaru. W zależności od typu wykresu będzie to jedna z tych wartości: RECT, Circle lub POLY. Jest to odpowiednik atrybutu kształt tagu <area>.
    • coords – tablica liczbowa opisująca obszar; odpowiada atrybutowi coords tagu <area>.