質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3483閲覧

Highchartsを用いてグラフ表示を行う際に、データとして配列を与えたい

hiroakisann

総合スコア13

Highcharts

HighchartはHTML、SVG、VMLを使ったJavascriptの描写用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/08 08:50

質問したいこと

以下のプログラムはHighChartsを用いて棒グラフを描くプログラムになっています。
JavaScriptのプログラムのグラフで表示するデータの値を入力する部分、【data: [300, 825, 900, 1090, 666]】(300, 825, 900, 1090, 666は各ユーザーのある値)の個所を【data:[]】とし、【data = [300, 825, 900, 1090, 666]】【x.series.push({data: hoge});】の二文を書き加え、hoge配列に入っている値をグラフのデータとして使用するような形にしたいのですが、上記のような変更を加えると、棒グラフの色が全ユーザー青に統一されてしまいます。元のプログラム同様に各ユーザーごとに色分けしたいのですがどのようにすればそのような仕様にできますでしょうか?
ご教授お願いいたします。

html

1<html> 2<head> 3<meta charset="UTF-8" /> 4<title>議論の可視化</title> 5 6<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7<script src="http://code.highcharts.com/highcharts.js"></script> 8<script src="https://code.highcharts.com/modules/exporting.js"></script> 9<script src="https://code.highcharts.com/modules/export-data.js"></script> 10 11<script type="text/javascript" src="hurikaeri2.js"></script> 12<script type="text/javascript" src="hurikaeri3.js"></script> 13<script type="text/javascript" src="hurikaeri4.js"></script> 14 15<script src="canvas.js"></script> 16<link rel="stylesheet" href="canvas.css" /> 17 18</head> 19<body> 20 21<div id="container" style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></div> 22<div id="container2" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 1300px; top: 200px"></div> 23<div id="container3" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 2000px; top: 200px"></div> 24<div id="container4" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 2000px; top: 800px"></div> 25 26 27<style type="text/css"> 28.rotate { 29transform: rotate(90deg); 30} 31select { width: 250px; } 32 33 34div { text-align : left ; } 35</style> 36<style> 37 div.box{ 38 background-color: rgb(255,0,0,0.4); 39 width:200px; 40 height:700px; 41 position: absolute; 42 left: 1615px; 43 top: 250px 44} 45</style> 46<div style="position:relative; top:-280px; left: 400px;"> 47<div class="rotate"> 48 49 <source id="saisin_id" src="C:/shiramatsu/2d31ac72-28be-40d2-b69b-2d8677cd003d/audio.flac"> 50 <p>※ご利用のブラウザでは再生することができません。</p> 51 52</div> 53</div> 54<div class="box"></div> 55</body> 56</html> 57

JavaScript

1$(document).ready(function() { 2 var keys=[1,2]; 3 4 5 $(function showElement() { 6 $.ajax('http://localhost:8000/api', // DASのAPIでdiscussion.jsonのようなデータを取得 7 { 8 type: 'get', 9 10 // xhrFields: { withCredentials: true }, 11 dataType: 'json', 12 success: function succes(data) { 13 14 15 16 17 $('#container3').highcharts(x); 18 return(keys); 19 }, 20 error:function() { 21 //取得失敗時に実行する処理 22 console.log("何らかの理由で失敗しました"); 23 24 } 25 26 27 } 28 ) 29 30 }); 31 32//console.log(function(data)); 33console.log(keys); 34 35 var x = { 36 chart: { 37 type: 'bar', 38 39 }, 40 title: { 41 text: '議論の可視化' 42 43 }, 44 subtitle: { 45 text: 'Source: Wikipedia.org' 46 47 }, 48 xAxis: { 49 50 categories: ["user1","user2","user3","user4","user5","user6"], 51 52 53 tickmarkPlacement: 'on', 54 title: { 55 enabled: false 56 } 57 }, 58 yAxis: { 59 min: 0, 60 title: { 61 text: '回', 62 align: 'high' 63 }, 64 65 }, 66 tooltip: { 67 shared: true, 68 69 }, 70 plotOptions: { 71 bar: { 72 dataLabels: { 73 enabled: true 74 } 75 } 76 }, 77 legend: { 78 enabled: false 79 }, 80 81 credits: { 82 enabled: false 83 }, 84 series: [ 85 { 86 name: '総発言量', 87 colorByPoint: true, 88 colors: ['#23a1e4', '#444444', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], 89 data: [300, 825, 900, 1090, 666]//変更する箇所 90 } 91 ] 92 93}; 94 95 96}); 97

以下に全ユーザーの棒グラフが青に統一されてしまうバージョンのJavaScriptを張っておきます。このプログラムを上のJavaScriptと同じ出力をするようにしたいと考えています。

JavaScript

1$(document).ready(function() { 2 var keys=[]; 3 var sample =[300, 825, 900, 1090, 666];//変更した箇所 4 5 6 $(function showElement() { 7 $.ajax('http://localhost:8000/api', // DASのAPIでdiscussion.jsonのようなデータを取得 8 { 9 type: 'get', 10 11 // xhrFields: { withCredentials: true }, 12 dataType: 'json', 13 success: function succes(data) { 14 function StyleDeclarationSetTransform(style,value){ 15 var list = [ 16 "transform", 17 "webkitTransform", 18 "MozTransform", 19 "msTransform", 20 "OTransform" 21 ]; 22 var i; 23 var num = list.length; 24 for(i=0;i < num;i++){ 25 if(style[list[i]] !== undefined){ 26 style[list[i]] = value; 27 return true; 28 } 29 } 30 return false; 31 } 32 33 x.series.push({data:sample});//変更した箇所 34 // x.xAxis.push({categories: keys}); 35 console.log("userの発言量"+sample); 36 37 $('#container3').highcharts(x); 38 return(keys); 39 }, 40 error:function() { 41 //取得失敗時に実行する処理 42 console.log("何らかの理由で失敗しました"); 43 44 } 45 46 47 } 48 ) 49 50 }); 51 52//console.log(function(data)); 53console.log(keys); 54 55 var x = { 56 chart: { 57 type: 'bar', 58 59 }, 60 title: { 61 text: '議論の可視化' 62 63 }, 64 subtitle: { 65 text: 'Source: Wikipedia.org' 66 67 }, 68 xAxis: { 69 70 categories: ["user1","user2","user3","user4","user5","user6"], 71 72 73 tickmarkPlacement: 'on', 74 title: { 75 enabled: false 76 } 77 }, 78 yAxis: { 79 min: 0, 80 title: { 81 text: '回', 82 align: 'high' 83 }, 84 85 }, 86 tooltip: { 87 shared: true, 88 89 }, 90 plotOptions: { 91 bar: { 92 dataLabels: { 93 enabled: true 94 } 95 } 96 }, 97 legend: { 98 enabled: false 99 }, 100 101 credits: { 102 enabled: false 103 }, 104 series: [ 105 { 106 name: '総発言量', 107 colorByPoint: true, 108 colors: ['#23a1e4', '#444444', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], 109 data: [] 110 } 111 ] 112 113}; 114 115 116}); 117

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

以下のように修正してみると、いかがでしょうか?

修正前:

javascript

1x.series.push({data:sample});

  
修正後:

javascript

1x.series[0].data = sample;

 
上記の修正によって意図したチャートが表示されることを検証したコードを、以下に上げておきました。

https://github.com/jun68ykt/q156975

全コミットのうち、

  • initial commit では、ご質問に挙げられているHTMLとJS(すべて青いバーになるほう)をそのままコミットしています。

上記から始めて、以下のコミット

を行った時点で、おそらく意図通りと思われる、以下のようなグラフが表示されました。

イメージ説明

以上参考になれば幸いです。

投稿2018/11/08 12:06

編集2018/11/08 12:47
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiroakisann

2018/11/29 11:09

返信が遅くなり、申し訳ありません。 意図通りの使用になっていました。 素早く回答を頂き本当にありがとうございました!
jun68ykt

2018/11/29 11:20

解決されたようで、よかったです ????
hiroakisann

2018/11/29 23:57 編集

ありがとうございます。 一つお伺いしたいのですが、今リアルタイムでグラフを動かしたいと考えておりまして、リアルタイムでデータを取得するところまではよかったのですが、ページを更新しないとグラフに反映できません。 redrawというオプションがHighartsにあると思うのですが、それを使えば定期的にグラフを再描写したりしてくれるのでしょうか? お忙しいところ恐縮なのですが、ご教授お願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問