問題タブ [c3]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - C3.js ボタンクリックからツールチップを表示
C3.js を使用してデータをグラフ化しています。ボタンのクリックから、またはグラフがレンダリングされたらデフォルトで、最後のデータ ポイント シリーズのツールチップを表示できるようにしたいと考えています。とにかくこれを行うことはありますか?彼らのドキュメントには tooltip.show のセクションがありますが、ドキュメントはありません。
json - JSON データ集約のベスト プラクティスは何ですか?
次の形式のデータセットがあるとします。
ここで、D3 または C3 チャートを描画して、各 CUSTOMER の YEAR および MONTH ごとに累積された REVENUE を表示する場合、次のような結果になると思います。
確かに、これはあまりエレガントに見えませんが、そんなことはありません。最悪の部分は、複数のディメンション (例: YEAR、MONTH、CUSTOMER) に基づくメジャー (例: REVENUE) の集計です。これは、JSON データに対して行うのが面倒です。
この問題をカバーするために独自の集計関数を作成しようとしましたが、値を手動で追加する以外に満足のいく解決策を見つけることができませんでした。誰かが私を正しい方向に導くことができますか? 私が説明した種類のグラフに適合するように、データをどのように集計しますか? すぐに利用できるソリューションはありますか?
このトピックに取り組んでいるので、主キーに基づいて 2 つ以上のデータセットを結合するにはどうすればよいでしょうか?
ありがとうございました!
javascript - 複数の系列/列を許可する D3 ゲージはありますか?
D3またはC3jsで次のようなものを探しています:
C3 のデフォルトのゲージ チャートは複数の列をデータとして受け取りますが、それらを同じ行に表示するため、互いに上書きされます。
javascript - C3 アニメーションをトリガーし、id をパスに割り当てる
「D3 ベースの再利用可能なチャート ライブラリ」である c3.js を使用しています。また、円グラフを内部に含むドーナツ グラフの独自の凡例も作成しました。凡例とグラフをリンクして、凡例項目をクリックすると、凡例とドーナツ/円グラフdiv
の対応する要素の両方でアニメーションがトリガーされるようにしたい、またはその逆の場合 (円/ドーナツ パスをクリックするとトリガーされる)path
両方のアニメーション)。c3 アイテムの onclick イベント リスナーを設定できることはわかっていますが、ID がないと、対応する legend を識別できませんdiv
。また、凡例にクリック ハンドラーを設定するとdiv
、対応するものがわからpath
ず、c3 の組み込みのクリック アニメーションをトリガーする方法もわかりません。
編集: 選択した状態 ( http://c3js.org/reference.html#api-select )をトリガーできることがわかりましたが、ID を渡す必要があります。私のグラフでは、渡す ID がありません。各データ ポイントにカスタム ID を設定する方法はありますか?
javascript - C3 / D3: グループ化されたバー (水平バーの上に伸びる垂直線) の上にセグメント化されたベンチマーク オーバーレイを追加する方法は?
私はこの D3/C3 のことは初めてで、それに取り組む時間が限られているプロジェクトを投げかけました。下の画像に示すように、C3 を使用して、水平バーの上に垂直しきい値を追加する方法を考えていました。 / D3 チャート ライブラリ。
その部分を除いて、私はそれがかなりスポットに見えるようにしています。任意の入力が役立ちます (それが役立つことを意図している場合)。
javascript - ページが jqgrid onselect にフォーカスを失い、生成されたチャートにフォーカスする
ブートストラップ 3、angular、JQgrid によるグリッド、および C3 によるグラフに基づく分析モジュールがあります。問題は、グリッドに移動して JQgrid の行を選択すると、フォーカスが失われ、新しいグラフが生成される上部にスクロールして戻ることです。
グリッドがクリックされたときにフォーカス:
また、行の選択時にグラフが変更されるたびに下にスクロールする必要があります。
選択グリッドがフォーカスを失い、チャートにフォーカスし始めた後:
また、行を選択すると発生し続け、行を選択するたびに下に戻るのが面倒になります。チャートが生成されたときにフォーカスを失わないようにする方法はありますか? ページが動的であり、ネストされたコードと JavaScript ファイルが多数添付されているため、JSFiddle を作成できません。
問題のGif:-
Jqgrid Config:- jqgrid config pastebin
c3 構成:- c3 チャートのペーストビン
c3 - c3.js 散布図の例と tsv ファイル
ここで C3 を初めて使用します。簡単な散布図を作ろうとしています。これでうまくいくと思いました (c3_test.csv は、サンプルからの同じデータ セットです)。
しかし、これは進むべき道ではないようです。これは機能し、
ただし、最初の方法でも目的の出力が得られるようにする方法を知っておくと役立ちます。また、tsv ファイルを読み込もうとしています。thisに基づいて、url インターフェイスを使用できると思ったのですが、うまくいかないようです。繰り返しますが、これについても助けていただければ幸いです。https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.jsを使用しています。私のcsv(tsv)ファイルは以下です。