Q&A
回答ありがとうございます。
useract[i]は試してみたのですが、そうするとグラフが表示されなくなったんです...
JavaScriptでHighchartを用いてグラフの描写をしているのですが、思った通りのグラフになってくれません.以下の手書きのようなグラフを構成したいと思っています。横軸が総発言量、縦軸がユーザー名です
以下のコードは主にグラフを構成している部分です。
主な変数は以下の通りです。
keys...ユーザー名入がっている
arr...ユーザーの発言量が入っている
user...ユーザーの総発言量
useract...ユーザーの総発言量が入った配列
下に続く
JavaScript
1var activity = obj[goukei].analysis.frame.activity; 2 var stu = obj[goukei].student; 3 var keys = Object.keys(activity);//keys:ユーザー名の入った配列 4 var user = 0; 5 var useract = []; 6 for (var i = 0; i < keys.length; i++) { 7 var arr = activity[keys[i]]; 8 keys[i] = ("ユーザー"+(i+1)); 9 for(var j = 0; j < arr.length; j++){ 10 user = user + parseFloat(arr[j]); 11 12 } 13 14 useract[i] = user 15 16 //console.log("総発言量"+ useract[1]); 17 18 19 20 x.series.push({name: keys[i], data: useract}); 21 22 user = 0; 23 24 } 25 26 27 for (var i = 0; i < arr.length; i ++) { 28 var count=0; 29 count=5*i; 30 31 } 32 33 $('#container2').highcharts(x); 34 }, 35 error:function() { 36 //取得失敗時に実行する処理 37 console.log("何らかの理由で失敗しました"); 38 } 39 })}); 40 41 42 var x = { 43 44 chart: { 45 type: 'bar', 46 47 }, 48 title: { 49 text: '議論の可視化' 50 51 }, 52 subtitle: { 53 text: 'Source: Wikipedia.org' 54 55 }, 56 xAxis: { 57 categories: [], 58 59 60 tickmarkPlacement: 'on', 61 title: { 62 enabled: false 63 } 64 }, 65 yAxis: { 66 67 title: { 68 text: 'Activity', 69 70 }, 71 72 }, 73 tooltip: { 74 shared: true, 75 76 }, 77 plotOptions: { 78 area: { 79 lineColor: '#707070', 80 lineWidth: 1, 81 marker: { 82 lineWidth: 1, 83 lineColor: '#707070' 84 } 85 } 86 }, 87 credits: { 88 enabled: false 89 }, 90 series: [] 91 92};
このプログラムを実行すると以下のグラフが得られます。
余計に2本グラフが構成されてしまいます。おそらく以下の箇所の最初のfor文中に記述しており、二回ループしているためだとは思いますが、for文外に記述するとグラフの形は理想的なものになりますが、ユーザー名１，２が結合してしまい全体水色のグラフになってしまします。
最初の手書きのグラフに近づけるにはどこを改善すればいいでしょうか？
ご教授お願いいたします。
JavaScript
1var activity = obj[goukei].analysis.frame.activity; 2 var stu = obj[goukei].student; 3 var keys = Object.keys(activity);//keys:ユーザー名の入った配列 4 var user = 0; 5 var useract = []; 6 for (var i = 0; i < keys.length; i++) { 7 var arr = activity[keys[i]]; 8 keys[i] = ("ユーザー"+(i+1)); 9 for(var j = 0; j < arr.length; j++){ 10 user = user + parseFloat(arr[j]); 11 12 } 13 14 useract[i] = user 15 16 //console.log("総発言量"+ useract[1]); 17 18 19 20 x.series.push({name: keys[i], data: useract}); 21 22 user = 0; 23 24 }
回答2件
0
ベストアンサー
こんにちは。
今現在、業務で開発しているサイトでHighchartsを使っておりまして、いくつかのチャートを作りましたが、ご質問にあるソースコード内の obj がどのようにデータを持っているか不明のためはっきりしたことは言えないのですが、この場合、series は要素が1個の配列で実現できるのでは、と思いました。
参考までに、HighchartsのBar chartのデモを修正して、hiroakikouraさんが望んでいる形になるべく近づけるということをやってみました。
元になるのは、Basic bar です。
(1) Basic Bar をFork:
(2) series の要素を ‘Year 2000’のデータのみにする。:
(3) series の要素のオブジェクトに colorByPoint: true を追加：
(4) Legendを非表示にし、バーの色をカスタマイズなど：
(5) series の要素のname と、 tooltip のvalueSuffixを修正：
上記のコードでは、 配列series の要素は１個で、その１個の要素の dataプロパティに発言量の数値の配列を与えています。
以上参考になれば幸いです。
投稿2018/09/06 00:02
編集2018/09/06 00:04
総合スコア9058
0
以下の処理で、Highchartsに渡すdataが当該ユーザーだけでなくすべて与えられています。
Javascript
1x.series.push({name: keys[i], data: useract}); // useract[i] こうするとよさそう
投稿2018/09/05 23:21
退会済みユーザー
総合スコア0
Highchartsを使用したことがなかったのでちょっと適当でしたかね。seriesというからには、他の方のご回答にあるように、1個の配列で実現できるようにも思えます。ループ文が終わったあとに、x.series.push({name: keys, data: useract}) とするとかですかね？詳しくはその方にお任せします:D
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/06 22:58
2018/09/07 01:37
2018/09/08 01:02 編集
2018/09/08 01:50
2018/09/18 20:56
2018/09/18 23:27