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

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

ただいまの
回答率

90.35%

  • JavaScript

    22087questions

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

  • Highcharts

    44questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 298

hiroakisann

score 7

 質問したいこと

以下のプログラムは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>
<head>
<meta charset="UTF-8" />
<title>議論の可視化</title>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<script type="text/javascript" src="hurikaeri2.js"></script>
<script type="text/javascript" src="hurikaeri3.js"></script>
<script type="text/javascript" src="hurikaeri4.js"></script>

<script src="canvas.js"></script>
<link rel="stylesheet" href="canvas.css" />

</head>
<body>

<div id="container" style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></div>
<div id="container2" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 1300px; top: 200px"></div>
<div id="container3" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 2000px; top: 200px"></div>
<div id="container4" style="width: 500px; height: 800px; margin: 0 auto;position: absolute; left: 2000px; top: 800px"></div>


<style type="text/css">
.rotate {
transform: rotate(90deg);
}
select { width: 250px; }


div { text-align : left ; }
</style>
<style>
 div.box{
    background-color: rgb(255,0,0,0.4);
    width:200px;
    height:700px;
    position: absolute;
    left: 1615px; 
    top: 250px
}
</style>
<div style="position:relative; top:-280px; left: 400px;">
<div class="rotate">

   <source id="saisin_id" src="C:/shiramatsu/2d31ac72-28be-40d2-b69b-2d8677cd003d/audio.flac">
   <p>※ご利用のブラウザでは再生することができません。</p>

</div>
</div>
<div class="box"></div> 
</body>
</html>
$(document).ready(function() {
  var keys=[1,2];


  $(function showElement() {
    $.ajax('http://localhost:8000/api',  // DASのAPIでdiscussion.jsonのようなデータを取得
      {
        type: 'get',

        // xhrFields: { withCredentials: true },
        dataType: 'json',
        success: function succes(data) {




          $('#container3').highcharts(x);
          return(keys);
        },
        error:function() {
          //取得失敗時に実行する処理
          console.log("何らかの理由で失敗しました");

        }


      }
      )

         });

//console.log(function(data));
console.log(keys);

   var x = {
     chart: {
      type: 'bar',

   },
    title: {
      text: '議論の可視化'

   },
    subtitle: {
      text: 'Source: Wikipedia.org'

   },
      xAxis: {

         categories: ["user1","user2","user3","user4","user5","user6"],


      tickmarkPlacement: 'on',
      title: {
         enabled: false
      }
   },
      yAxis: {
        min: 0,
        title: {
            text: '回',
            align: 'high'
      },

   },
      tooltip: {
      shared: true,

   },
      plotOptions: {
       bar: {
            dataLabels: {
                enabled: true
            }
        }
   },
   legend: {
        enabled: false
    },

      credits: {
      enabled: false
   },
      series: [
      {
        name: '総発言量',
        colorByPoint: true,
         colors: ['#23a1e4', '#444444', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        data: [300, 825, 900, 1090, 666]//変更する箇所
      }
      ]

};


});

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

$(document).ready(function() {
  var keys=[];
  var sample =[300, 825, 900, 1090, 666];//変更した箇所


  $(function showElement() {
    $.ajax('http://localhost:8000/api',  // DASのAPIでdiscussion.jsonのようなデータを取得
      {
        type: 'get',

        // xhrFields: { withCredentials: true },
        dataType: 'json',
        success: function succes(data) {
          function StyleDeclarationSetTransform(style,value){
    var list = [
      "transform",
      "webkitTransform",
      "MozTransform",
      "msTransform",
      "OTransform"
    ];
    var i;
    var num = list.length;
    for(i=0;i < num;i++){
      if(style[list[i]] !== undefined){
        style[list[i]] = value;
        return true;
      }
    }
    return false;
  }

          x.series.push({data:sample});//変更した箇所
         // x.xAxis.push({categories: keys});
          console.log("userの発言量"+sample);

          $('#container3').highcharts(x);
          return(keys);
        },
        error:function() {
          //取得失敗時に実行する処理
          console.log("何らかの理由で失敗しました");

        }


      }
      )

         });

//console.log(function(data));
console.log(keys);

   var x = {
     chart: {
      type: 'bar',

   },
    title: {
      text: '議論の可視化'

   },
    subtitle: {
      text: 'Source: Wikipedia.org'

   },
      xAxis: {

         categories: ["user1","user2","user3","user4","user5","user6"],


      tickmarkPlacement: 'on',
      title: {
         enabled: false
      }
   },
      yAxis: {
        min: 0,
        title: {
            text: '回',
            align: 'high'
      },

   },
      tooltip: {
      shared: true,

   },
      plotOptions: {
       bar: {
            dataLabels: {
                enabled: true
            }
        }
   },
   legend: {
        enabled: false
    },

      credits: {
      enabled: false
   },
      series: [
      {
        name: '総発言量',
        colorByPoint: true,
         colors: ['#23a1e4', '#444444', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        data: []
      }
      ]

};


});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

こんにちは。

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

修正前:

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


  
修正後:

x.series[0].data = sample;

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

https://github.com/jun68ykt/q156975

全コミットのうち、

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

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

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

イメージ説明

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/29 20:09

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

    キャンセル

  • 2018/11/29 20:20

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

    キャンセル

  • 2018/11/30 08:42 編集

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22087questions

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

  • Highcharts

    44questions

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