如何訪問.highcharts（）函數中的任何地方的series.data？

我打算將數據放在y軸的x軸標籤的mouseover事件中，這樣當用戶將鼠標懸停在x軸標籤上時，它會在我的堆棧圖中顯示值的摘要文本。如何訪問.highcharts（）函數中的任何地方的series.data？

問題是如何訪問我的x軸內y軸數據：{...}代碼

 $(function() { 

     var categoryImgs = { 
      'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;', 
      'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;' 
     }; 

     var totals = new Array(); 
     var stackTotals = new Array(); 
     var i = 5, j = 0; 
     //totals = HighchartsAdapter 
     function reverse() { 
      totals.reverse(); 
     } 

     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 

      title: { 
       text: 'Premium Summary' 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: '' 
       }, 
       labels: { 
        formatter: function() {        
         return '$' + this.value; 
        } 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',               
        },             
        formatter: function() { 
         totals[i++] = this.total;       
         return ''; 
        }, 

       }      
      }, 

      xAxis: { 
       categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'], 
       labels: { 
        x: 5, 
        useHTML: true, 

        formatter: function() {       

         var n = totals.shift(); 
         return '<div class="stacktotal">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>'; 

        }, 
        events: { 
         mouseover: function() { 
          $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>'); 
         }, 
         mouseout: function() { 
          $('#hoverboard').html(''); 
         }        
        }, 
       }      
      }, 

      linkedTo: 0, 
      categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'], 

      legend: { 
       align: 'right', 
       x: -70, 
       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: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
         style: { 
          textShadow: '0 0 3px black, 0 0 3px black' 
         }, 
         format: '${y}' 
        } 
       } 

      }, 

      series: [{ 
       name: 'Policy Fee', 
       y:'$' + this.value, 
       data: [200.12, 290, 45.78, 71, 120]      
      }, { 
       name: 'WOP', 
       data: [150, 210.23, 150, 200, 100] 
      }, { 
       name: 'Income Protection', 
       data: [89, 400, 258.13, 212, 152] 
      }, { 
       name: 'Life Cover', 
       data: [150, 210.23, 150, 200, 100] 
      } ] 

     });   

    });

來源

2014-02-20 maximumride

你的問題是不是正是你想顯示什麼明確的，有什麼你的意思是通過yAxis數據嗎？軸標籤或數據相關的東西？ – Strikers

我想訪問這些類型的數據 - 名稱：'WOP'，系列：[{0}名稱：'Policy Fee'，並將它們放在我的鼠標懸停事件中 y：'$'+ this.value， data： [200.12，290，45.78，71，120] }，{ name：'WOP'， data：[150,210.23,150,200,100] }，... – maximumride

您的意思是讓鼠標懸停信息看起來類似於數據的工具提示？ – Strikers

看起來插件有其侷限性 - 在事件回調this指向DOM元素，而不是Highcharts中的某個元素。

達到你需要什麼，你可以添加一些自定義屬性在格式創建的HTML標籤，您所需要的信息。例如通過指數：

    formatter: function() {    
         var axis = this.axis, 
          index = axis.categories.indexOf(this.value); 

         var n = totals.shift(); 
         return '<div class="stacktotal" data-index="' + index + '">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>'; 

        },

然後你可以在事件值：

     mouseover: function() { 
          var chart = $("#container").highcharts(), 
           index = $(this).find('.stacktotal').attr("data-index"); 

          console.log('Index', index); //index is index of category 
          var point = chart.series[0].data[index]; 
          console.log('Point', point); // point for specific category in first series 


          $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>'); 
         },

演示了所有：http://jsfiddle.net/BkxhA/4/

來源

2014-02-20 10:30:33

感謝Pawel！你是專家！ @帕維爾 - FUS – maximumride

如何訪問.highcharts（）函數中的任何地方的series.data？

回答

相關問題