Всплывающая подсказка Highcharts, показывающая выбранные точки

Я разрешил множественный выбор при нажатии (первый щелчок выбирает диаграмму, а второй щелчок выполняет развертку на этой диаграмме). Я хочу показать всплывающую подсказку (или любой другой способ), которая отображает все выбранные графики (например: если я выберу две диаграммы, я хочу, чтобы всплывающая подсказка показывала информацию об этих двух диаграммах).Всплывающая подсказка Highcharts, показывающая выбранные точки

Вот мой HTML:

<html> 
    <head> 
     <title>Highcharts</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="https://code.highcharts.com/highcharts.js"></script> 
     <script src="https://code.highcharts.com/modules/data.js"></script> 
     <script src="http://github.highcharts.com/modules/exporting.js"></script> 
     <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
     <script src="highcharts.js" type="text/javascript"></script> 
     <!--Black theme 
     <script src="black-theme.js" type="text/javascript"></script> 
     --> 
    </head> 
    <body> 
     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
     <!-- <button id="button">Get selected points</button> 
     <div>event: <span id="label"></span></div>--> 
    </body> 
</html>

А вот мой Javascript Файл:

$(function() { 
    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'column', 
      events: { 
       drilldown: function (e) { 
        if (!e.seriesOptions && e.point.selected) { 
         var chart = this, 
           points = chart.getSelectedPoints(), 
           drilldowns = { 
            'Animals': { 
             name: 'Animals', 
             data: [ 
              ['Cows', 2], 
              ['Sheep', 3] 
             ] 
            }, 
            'Fruits': { 
             name: 'Fruits', 
             data: [ 
              ['Apples', 5], 
              ['Oranges', 7], 
              ['Bananas', 2] 
             ] 
            }, 
            'Cars': { 
             name: 'Cars', 
             data: [ 
              ['Toyota', 1], 
              ['Volkswagen', 2], 
              ['Opel', 5] 
             ] 
            } 
           }; 

         Highcharts.each(points, function (p) { 
          chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]); 
         }); 
         chart.applyDrilldown(); 
        } 

       }, 
       drillup: function (e) { 
        var chart = this, 
          points = []; 
        setTimeout(function() { 
         points = chart.getSelectedPoints(); 

         Highcharts.each(points, function (p) { 
          // unselect points from previous drilldown 
          p.selected = false; 
          p.setState('', true); 
         }); 
        }, 0); 
       } 
      } 
     }, 
     title: { 
      text: 'Async drilldown' 
     }, 
     xAxis: { 
      type: 'category', 
      categories: [ 
       'Animals', 
       'Fruits', 
       'Cars' 
      ], 
     }, 
     yAxis: { 
      title: { 
       text: 'Values' 
      } 

     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>', 
      footerFormat: '</table>', 
      shared: false, 
      useHTML: true 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      column: { 
       allowPointSelect: true 
      }, 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     series: [{ 
       allowPointSelect: true, 
       name: 'Test things', 
       colorByPoint: true, 
       data: [{ 
         name: 'Animals', 
         y: 5, 
         drilldown: true 
        }, { 
         name: 'Fruits', 
         y: 2, 
         drilldown: true 
        }, { 
         name: 'Cars', 
         y: 4, 
         drilldown: true 
        }] 
      }], 
     drilldown: { 
      series: [] 
     } 
    }); 
});

Edit: Я пробовал это решение, но unfortunetely показывает только последняя точка выбрана:

plotOptions: { 
    column: { 
     allowPointSelect: true 
    }, 
    series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true 
     }, 
     point: { 
      events: { 
       select: function() { 
        var text = this.category + ': ' + this.y + ' was last selected', 
          chart = this.series.chart; 
        if (!chart.lbl) { 
         chart.lbl = chart.renderer.label(text, 100, 70) 
           .attr({ 
            padding: 10, 
            r: 5, 
            fill: Highcharts.getOptions().colors[1], 
            zIndex: 5 
           }) 
           .css({ 
            color: '#FFFFFF' 
           }) 
           .add(); 
        } else { 
         chart.lbl.attr({ 
          text: text 
         }); 
        } 
       } 
      } 
     }, 
    } 
},

Спасибо вам за помощь!

источник

2015-11-25 Ferran Buireu

Можно получить все выбранные точки, используя chart.getSelectedpoints() (то же самое используется в детализации), и если выбор накоплен (event.accumulative в событии выбора будет правдой), добавьте информацию обо всех выбранных точках в свой собственный ярлык.

Пример: http://jsfiddle.net/xbvmpev5/

Edit:

Измененный код, потому что приведенное выше описание не является достаточно ясным:

  point: { 
       events: { 
        select: function (event) { 
         var text = 'All selected points: <br/>', 
          chart = this.series.chart, 
          otherSelected = chart.getSelectedPoints(); 
         if (event.accumulate) { 
          Highcharts.each(otherSelected, function (point) { 
           text += point.category + ': ' + point.y + '<br/>'; 
          }); 
         } 
         text += this.category + ': ' + this.y + ' (last selected)';

источник

2015-11-27 12:10:34

Это должно быть комментарий, потому что ваш пример jsfiddle это точно так же, как и мой, и вы не ставите код, чтобы помочь моей проблеме. В любом случае, спасибо за посещение –

Код @FerranBuireu изменен, см. Edit, чтобы узнать, какая именно деталь, если описание недостаточно ясно. –

Я немного изменил код, чтобы убедиться, что при развертке ось X показывает значение текущей серии (у животных корабли и коров или что-то еще). Это моя ошибка, потому что я изменил ее в последнюю минуту, но ваш код работает perferctly. Ответ принят :) –

Всплывающая подсказка Highcharts, показывающая выбранные точки

ответ

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