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

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

ただいまの
回答率

87.48%

Highchatsのredrawイベントが発火した際にグラフ上にHighchartsのannotation機能を使ってコメントを付けたい

受付中

回答 0

投稿

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

score 13

やりたいこと

閲覧ありがとうございます!
Highchatsのredrawイベントが発火した際にグラフ上にHighchartsのannotation機能を使ってコメントを付けたいと思っています。

やったことと分からないこと

ソースコードが下記の2つです。
JavaScriptのソースの5行目のx.annotations.pushというようにannotationを付与できるようになっています。 
このコードでは,x:5,y:1の箇所にtest1という文字列を表示させています。
redrawイベントの処理はJavaScriptのソースの33行目で行っています。redrawイベントの内部に5行目と同様x.annotations.pushというようにx:10,y: 1の箇所にtest2という文字列を付与させるコードを記述しています。 
しかし,表示したグラフがredrawされてもx:10,y: 1の箇所にコメントが表示されません(表示したグラフ上でクリック&ドラッグするとグラフがズームされredrawベントが発火します)
41行目のconsole.logでx.annotationsを確認したところannotationのラベルにはtest2が入っているように思います。 
コメントが表示されないのはグラフの描写タイミングの問題でしょうか? 
なにか解決策をご教授頂ければ幸いでございます。 
質問がへたくそで申し訳ありません、よろしくお願いします!

コード

<html>
<head>
<meta charset="UTF-8" />
<title>議論の可視化</title>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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 src="https://code.highcharts.com/modules/annotations.js"></script>


<script type="text/javascript" src="situmon_sample.js"></script>


<style >
        /* css つまみサイズ調整 */
        #slider .ui-slider-handle {
            width:5px;
            height:5px;
            margin-top:2px;
        }
    </style>
<style>
    #slider{
        width:100;
        height:10;
 z-index: 1;
}</style>
<style>
 body {
        width: 500px;
        transform-origin: 0 0;
        margin: 0;

    }
</style>
<script>
window.addEventListener( "scroll", function () {
var element = document.getElementById("slider");
//var value = document.getElementById("slidervalue");
window.onscroll = function() {
var scrollTop = document.body.scrollTop; 

var scrollLeft= document.body.scrollLeft;
console.log("縦に移動した位置:"+ scrollTop + "px" );

console.log("横に移動した位置:"+ scrollLeft+ "px" );
var scale =document.body.style.transform;
var result1 = Number(scale.indexOf( '(' ));
var result2 = result1 + 1;
var result3 = scale.replace(')', '');
result3 =Number( result3.slice(result2));
console.log(typeof(scrollTop ) );
console.log(typeof(value) );
element.style.left = scrollLeft/result3;
element.style.top  = scrollTop/result3; 
}; 
});

    var change_scale = {
        "container": 500,
        "percent": 1,
        "function": function(a) {
            "use strict";
            //if (change_scale.percent === window.devicePixelRatio) {
                var scale = document.documentElement.clientWidth;
                scale = a;//scale / change_scale.container;
                scale = "scale(" + scale + ")";
                document.body.style.transform = scale;

            /*} else {
                change_scale.percent = window.devicePixelRatio;
            }*/
        }
    };

  $(function() {
 $( "#slider" ).slider({
  max:5, //最大値
  min: 1, //最小値
  value: 1, //初期値
  step: 0.5, //幅
  //orientation: "vertical", //縦設置か横設置か

  slide: function( event, ui ) {
   $("#slidervalue").html("slider:"+ui.value);
    console.log(ui.value);
   change_scale.function(ui.value);
    var w = 100/ui.value;
   var width = String(w) + "px";
   document.getElementById('slider').style.width = width;
   var h = 10/ui.value;
   var height = String(h) + "px";
   document.getElementById('slider').style.height = height;
  },
  create: function( event, ui ) {
   $("#slidervalue").html("create:"+$(this).slider( "value" ));
    console.log(ui.value);
   change_scale.function(ui.value);
  },
  start: function( event, ui ){
   $("#slidervalue").html("start:"+ui.value);
    console.log(ui.value);
   change_scale.function(ui.value);

  },
  stop: function( event, ui ) {
   $("#slidervalue").html("stop:"+ui.value);
   console.log(ui.value);
   change_scale.function(ui.value);
   var w = 100/ui.value;
   var width = String(w) + "px";
   document.getElementById('slider').style.width = width;
   var h = 10/ui.value;
   var height = String(h) + "px";
   document.getElementById('slider').style.height = height;

  },
  change: function( event, ui ) {
   $("#slidervalue").html("change:"+ui.value);
    console.log(ui.value);
   change_scale.function(ui.value);
  }
 });
 //ボタンを押したら値を100にする 
});
  </script>
</head>
<body>
<div id="slider"></div>


<div id="container" style="width: 400px; height: 600px; margin: 0 auto;position: absolute; left: 50px; top: 105px"></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:500px; left: 400px;">
<div class="rotate">

   <source id="saisin_id" src="C:/shiramatsu/2d31ac72-28be-40d2-b69b-2d8677cd003d/audio.flac">


</div>
</div>
<div class="box"></div> 
<textarea id="textarea1"  cols="30" value= "" style="background-color:transparent;font-size:30px; width: 300px; height: 300px;position: absolute; left: 500px; top: 2005px; ">

</textarea>

</body>
</html>
$(document).ready(function() {
   $(function showElement() {
   var sample= [2,3,5,2,4,7,8,1,2,3,4,5,6,7,8];
   x.series.push({name: 'use1', data: sample});
    x.annotations.push(
              {visible:true,draggable: "xy",labels: [{point: {xAxis: 0,yAxis: 0,x:5,y: 1},text: 'test1'}]},  
              {labelOptions: {shape: 'connector',align: 'right',justify: false,crop: true,
              style: {fontSize: '0.2em',textOutline: '1px white'}
              },}
              );
   $('#container').highcharts(x);
   })  


   var aTicksP = 0;
   var aTicksV = 0;
   var pic_time = [];
   var newid;
   var start_time;
   var end_time;

   var x = {
     annotations: [

        ],
     chart: {
      type: 'area',
      animation: Highcharts.svg,
      zoomType: 'x',
      marginRight: 10,

      events: {
            redraw: function(e){

              x.annotations.push(
              {visible:true,draggable: "xy",labels: [{point: {xAxis: 0,yAxis: 0,x:10,y: 1},text: 'test2'}]},  
              {labelOptions: {shape: 'connector',align: 'right',justify: false,crop: true,
              style: {fontSize: '0.2em',textOutline: '1px white'}
              },}

              ); console.log(x.annotations);




                //saisinid = ("file:///C:/app1/"+data[0].id+"/audio.flac#t=1.0,2.0");
            }

     },

      inverted: true
     },


    title: {
      text: '発言量の時間変化',
      style: {
                  fontSize: '15px' // タイトルの文字サイズ
                    }

    },


    xAxis: {
      type : 'time',
       categories: ["0.05","0.10","0.15","0.20","0.25","0.30","0.35","0.40","0.45","0.50","0.55","1.00","1.05","1.10","1.15","1.20","1.25","1.30","1.35","1.40","1.45","1.50","1.55","2.00","2.05","2.10","2.15","2.20","2.25","2.30","2.35","2.40","2.45","2.50","2.55","3.00","3.05","3.10","3.15",],
        labels: {
                  style: {
                      fontSize: '15px' // x軸の値の文字サイズ
                  }
                    },

      tickmarkPlacement: 'on',
      title: {
         enabled: false
      }
    },

    yAxis: {

      title: {
         text: 'Activity',
         style: {
                  fontSize: '15px' // タイトルの文字サイズ
                    }

      },
      labels: {
                  style: {
                      fontSize: '15px' // x軸の値の文字サイズ
                  }
                    },

    },


    tooltip: {
    shared: true,
    },


    plotOptions: {
      area: {
         stacking: 'percentage',
         lineColor: '#707070',
         lineWidth: 1,
         marker: {
            lineWidth: 1,
            lineColor: '#707070'
         }
      }
    },






    legend: {        
    },


    credits: {
    enabled: false
    },


    series: [
      ]

};

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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