2016-08-29 10 views
1

highcharts.jsを使用して横棒グラフを作成しています。正しく動作しますが、デフォルトのツールチップが水平に表示されるので、ツールチップの位置を水平ではなく垂直にします。ハイチャートのツールチップ位置を移動するには?

これは可能ですか?どんな助けにも感謝! JSFiddle - Example

サンプルコード:

$(function() { 
    var chart; 

    $(document).ready(function() { 

     chart = new Highcharts.Chart({ 

      chart: { 

       renderTo: 'container', 

       type: 'bar' 

      }, 

      title: { 

       text: 'Stacked bar chart' 

      }, 

      xAxis: { 

       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 

      }, 

      yAxis: { 

       min: 0, 

       title: { 

        text: 'Total fruit consumption' 

       }, 
       stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 

      }, 

      legend: { 

       align: 'right', 
      x: -100, 
      verticalAlign: 'top', 
      y: 20, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 

      }, 

      tooltip: { 

       formatter: function() { 
       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y +'<br/>'+ 
        'Total: '+ this.point.stackTotal; 
      } 

      }, 

      plotOptions: { 

       series: { 

        stacking: 'normal', 
        dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
       } 


       } 

      }, 

       series: [{ 

       name: 'John', 

       data: [5, 3, 4, 7, 2] 

      }, { 

       name: 'Jane', 

       data: [2, 2, 3, 2, 1] 

      }, { 

       name: 'Joe', 

       data: [3, 4, 4, 2, 5] 

      }] 

     }); 

    }); 


}); 

予想される出力: enter image description here

+0

チェックツールチップのフォーマッタで
を削除した場合あなたがしたい –

+0

ロッキーヤンのコメントに加えて、この例を見てください:http://jsfiddle.net/ayJYV/587/ –

+0

あなたが求めているものが不明です。それが "*横に見える*"ということはどういう意味ですか、そして、あなたはそれを "縦にする*"と言いたいのですか?そしてあなたは**ポジション**を指しているのですか、それとも**レイアウト**ですか?ツールチップの内容は既に垂直方向に配置されています - 水平*と垂直*を混同していますか?あなたがしたいことの例を提供してください。 – jlbriggs

答えて

1

私は、次のようTooltip.positionerを使用してこの問題を解決することができています -

tooltip: { 

    formatter: function() { 
     return '<b>' + this.x + '</b><br/>' + 
      this.series.name + ': ' + this.y + '<br/>' + 
      'Total: ' + this.point.stackTotal; 
    }, 
    positioner: function(labelWidth, labelHeight, point) { 
     var tooltipX = point.plotX + 20; 
     var tooltipY = point.plotY - 30; 
     return { 
      x: tooltipX, 
      y: tooltipY 
     }; 
    } 
},