hinzufügen benutzerdefinierte Dropdown-Menü in highcharts/highstock

Question

Ich bin auf meiner Seite ein Dropdown-Menü mit:

<form action="/my-action/" method="post" name="selection"> 
    <label for="user"> User</label> 
    <select id="user" name=user onclick="$(this).closest('form').submit();"> 
     <option>user 1</option> 
     <option>user 2</option> 
    </select> 
</form> 

Was ich erreichen möchte, ist dieses Dropdown-Menü auf der Karte, zum Beispiel hinzuzufügen nächste zum Diagrammtitel oder neben der Bereichsauswahl am oberen Rand des Diagramms.

Ich konnte sowieso nicht finden, und ich weiß nicht, wie man damit umgeht, mit Javascript, jQuery oder HTML.

Ich schätze jede Hilfe.

Answer 1

Ich habe versucht, Drop-Down-Menüs innerhalb einer Highcharts-Visualisierung mit der renderer.html Funktion viele Male hinzufügen, und es funktioniert leider nicht. Sie können das Menü sehen, aber Sie können nicht aus seinen Optionen wählen. Meine Vermutung liegt daran, wie das Menü wiedergegeben wird, sobald das Diagramm als SVG-Datei gezeichnet wird.

Die gute Nachricht ist, dass HTML-Elemente außerhalb Highcharts mit dem Diagramm interagieren können, so dass Sie eine Javascript-Funktion erstellen können, die zum Beispiel eine bestimmte Serie zeigen oder verbergen, je nachdem, was der Benutzer in Ihrem Menü wählt. Ein Beispiel finden Sie in den Menüs über der Tabelle: https://www.frbatlanta.org/chcs/labor-market-distributions.aspx.

Sie können auch einfache Links oder Schaltflächen in renderer.html Elemente verwenden. Fügen Sie diesen Schaltflächen ein onClick()-Ereignis hinzu, um mit dem Diagramm zu interagieren. Was bei dieser Lösung hilfreich ist, sind die Schaltflächen, die beim Exportieren neben dem Diagramm angezeigt werden. Das erste Diagramm in diesem Beispiel zeichnet dasselbe Diagramm mit anderen Daten neu, wenn ein Benutzer auf eine Schaltfläche klickt: https://www.frbatlanta.org/economy-matters/2016/05/02/trade-dynamics-between-world-and-china.

Ich habe beide Charts entwickelt, also zögern Sie bitte nicht, Fragen in den Kommentaren zu stellen, wenn Sie zusätzliche Anleitungen benötigen.

Answer 2

Es ist ein paar Monate her, seit Sie diese Antwort gepostet haben ... aber falls Sie einchecken: Ich würde gerne wissen, wie Sie die Kontextschaltflächen in den von Ihnen entwickelten Beispielen codiert haben, insbesondere die einfache Grafik mit Schaltflächen für, sagen wir Exporte/Importe.

Ich bin nicht viel von einem Coder, aber haben grundlegende Highcharts Inhalt über Carbon Brief entwickelt, zum Beispiel hier sind ein coupleexamples. Ich habe Ihren Code mit "Quelltext anzeigen" untersucht, aber es war ziemlich schwer zu erkennen, auf welche Teile ich mich konzentrieren sollte.

Für unsere Website schreiben wir die Diagramme als separate HTML-Datei, hosten sie auf GitHub und betten sie dann über einen iFrame in Artikelseiten ein. Wir haben keine tiefere Kontrolle über die Website von Tag zu Tag, da sie von einem externen Entwickler erstellt wurde.

Danke! Simon