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: [] 
     } 
    }); 
});

編輯：我試過這個解決方案，但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在選擇事件中將爲true），將有關所有選定點的信息添加到自定義標籤中。

例子：http://jsfiddle.net/xbvmpev5/

編輯：

更改代碼，因爲上面的描述不夠清晰：

  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你的例子是完全一樣的作爲我的，你不會把代碼來幫助我的問題。無論如何，感謝您訪問 –

@FranranBuireu代碼已更改，請參閱編輯以查看描述不夠清楚的部分。 –

我已經修改了一些代碼，以確保在鑽取時X軸顯示當前系列的值（在動物船和牛或其他）。這是我的錯，因爲我在最後一分鐘改變了它，但你的代碼工作正常。接受的答案:) –

Highcharts的工具提示顯示選定的點

回答

相關問題