は、私は私のページ上のドロップダウンメニューを持っていますhighcharts/highstock

Question

にドロップダウンメニューのカスタム追加：

<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> 

私が達成したい何を、次の例のために、チャート上のメニューこのドロップダウンを追加することですチャートのタイトルに、またはチャートの上部にある範囲セレクタの隣に移動します。

私はこのためにとにかく見つけることができませんでした。私はjavascript、jQueryまたはhtmlを使用して、これを処理する方法を知りません。

何か助けていただきありがとうございます。

Answer 1

私は、renderer.html関数を何度も使用してハイチャートの視覚化内にドロップダウンメニューを追加しようとしましたが、残念ながらうまくいきません。メニューは表示されますが、そのオプションから選択することはできません。私の推測は、チャートがSVGファイルとして描画された後のメニューのレンダリングによるものです。

ハイチャート外のHTML要素はチャートとやりとりすることができるので、たとえば、ユーザーがメニューで選択した内容に応じて特定のシリーズを表示または非表示にできるJavascript機能を作成できます。例については、図の上のメニューを参照してください：https://www.frbatlanta.org/chcs/labor-market-distributions.aspx。

renderer.html要素の単純なリンクまたはボタンを使用することもできます。これらのボタンにonClick()イベントを追加して、チャートと対話します。このソリューションの便利な点は、エクスポート時にチャートの横にボタンが表示されることです。この例の最初のグラフは、ユーザーがボタンをクリックしたときに異なるデータで同じグラフを再描画します：https://www.frbatlanta.org/economy-matters/2016/05/02/trade-dynamics-between-world-and-china。

私は両方のチャートを開発しましたので、追加のガイダンスが必要な場合は、コメントに質問してください。

Answer 2

あなたがこの回答を投稿してから数ヶ月ですが、あなたがチェックインした場合：あなたが開発したそれらの例のコンテキストボタンをどのようにコード化しているか知っています。特に、輸入。

私は多くのコーダーではありませんが、カーボンブリーフでの基本的なハイチャートのコンテンツを開発しています。例えば、coupleexamplesです。私はあなたのコードの中に "view page source"を見ていましたが、どのパーツに集中するのかかなり分かりませんでした。

私たちのサイトでは、チャートをHTMLの別の部分として書き、GitHubでホストし、iframe経由で記事ページに埋め込みます。私たちは、外部の開発者によって構築されているため、日々のサイトをより詳細に管理する必要はありません。

ありがとうございます！ Simon