Как перемещать позицию всплывающей подсказки в Highchart?

Я использую highcharts.js для построения горизонтальной гистограммы. Его правильная работа, но по умолчанию всплывающая подсказка появляется горизонтально, поэтому я хочу, чтобы положение всплывающей подсказки было вертикальным, а не горизонтальным.Как перемещать позицию всплывающей подсказки в Highchart?

Можно ли это достичь? Любая помощь ценится! 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] 

      }] 

     }); 

    }); 


});

Ожидаемый результат:

источник

2016-08-29 Sumit Deshpande

чек если удалить
в форматировании всплывающей подсказки, то что вы хотите –

В дополнение к комментарию Rockie Yang, посмотрите на этот пример: http://jsfiddle.net/ayJYV/587/ –

Неясно, что вы спрашиваете. Что вы имеете в виду, что оно «* появляется горизонтально», и что вы хотите сказать, что хотите «вертикально»? И вы имеете в виду ** позицию **, или вы имеете в виду ** макет **? Содержимое всплывающей подсказки в настоящее время уже выровнено по вертикали - вы смешиваете * horizontal * и * vertical *? Представьте пример того, что вы хотите. – jlbriggs

Я могу решить эту проблему, используя 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 
     }; 
    } 
},

источник

2016-08-31 13:34:14

Как перемещать позицию всплывающей подсказки в Highchart?

ответ

Смежные вопросы