Q&A
実現したいこと
- c3.jsで一画面に複数のグラフを並べて表示したいと思っているのですが、うまく動作しません。
アドバイス頂ければ幸いです。
前提
簡易にグラフ表示のできるc3.jsというライブラリを見つけました。
サンプルのコードを使って、簡単に各種グラフを作成できることが判ったのですが、一画面に複数のグラフを並べる場合の作り方が判らず、行き詰っています。
単独では、chartというオブジェクトにパラメタを指定して、
<div id="chart"></div>
というタグに対してグラフを表示できました。
発生している問題・エラーメッセージ
複数を表示するために、オブジェクト変数をchart1,chart2として、
<div id="chart1"></div>
<div id="chart2"></div>
としたところが何も出てきません。
エラー表示も特にありません。
該当のソースコード
Javascript
1<html> 2 <head> 3 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet"> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script> 6 </head> 7 <body> 8 <div id="chart1"></div> 9 <div id="chart2"></div> 10 11<script> 12var chart1 = c3.generate({ 13 data: { 14 columns: [ 15 ['Sales', 66] 16 ], 17 type: 'gauge' 18 }, 19 gauge: { 20 label: { 21 format: function(value, ratio) { 22 return value; 23 } 24 } 25 }, 26 color: { 27 pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], 28 threshold: { 29 values: [30, 60, 90, 100] 30 } 31 }, 32 size: { 33 height: 210 34 } 35}); 36var chart2 = c3.generate({ 37 data: { 38 columns: [ 39 ['Sales', 44] 40 ], 41 type: 'gauge' 42 }, 43 gauge: { 44 label: { 45 format: function(value, ratio) { 46 return value; 47 } 48 } 49 }, 50 color: { 51 pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], 52 threshold: { 53 values: [30, 60, 90, 100] 54 } 55 }, 56 size: { 57 height: 210 58 } 59}); 60 61</script> 62 </body> 63</html>
試したこと
単独のグラフをして、オブジェクト名をchart1に変え、
<div id="chart1"></div>
とすると、何も出てこなくなりました。chartという名前が固定になっているような気がします。
回答1件
0
ベストアンサー
c3.jsの実装を確認するとbindtoというキーの対象が#chartになっているのでご推測のとおりと思います。
ちなみにあくまでc3.generate()で全てやってくれてるので変数で受け取る必要はないようです（手元で検証済み）
このライブラリ前提で、同じページに設置したいのであればそれぞれのグラフを別ページとしてhtml作成して、iframeで読ませることになると思います。
投稿2023/04/24 06:17
編集2023/04/24 06:18
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/24 06:25
2023/04/24 09:02
2023/04/24 13:17