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

質問したいこと

以下のプログラムは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

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

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

修正前：

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

　　
修正後：

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

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

https://github.com/jun68ykt/q156975

全コミットのうち、

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

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

chartのデータ設定を修正

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

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

投稿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にあると思うのですが、それを使えば定期的にグラフを再描写したりしてくれるのでしょうか？お忙しいところ恐縮なのですが、ご教授お願いいたします。

行動規範の内容に同意します