當圖表較小時，Highstocks工具提示不起作用？對於highstocks.js

Question

我已經創建自定義格式功能：

  var tooltip = []; 
      for (key in this.points) {//if point type is portfolio 
       if (this.points[key].point.type == 'portfolio') { 
        tooltip[key] = '<span style="color:' + his.points[key].series.color +'">' + this.points[key].series.name + '</span>' + '<br/><b>'+ _('', 'Net assets: ') + _s(this.points[key].point.sum, 2) + '</b>' + '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ((this.points[key].point.change < 0)?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>'; 
       } else { 
        tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ((this.points[key].point.change < 0)?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>'; 
       } 
      } 
      var tl = ''; 
      for (key in tooltip) { 
       tl += tooltip[key] 
      } 
      var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x); 

      tl = date + '<br/>' +tl; 
      return tl; 

的特點是，此功能usues不僅Y上一點，但也有一些additinal性質，我已經加入到了這一點：這樣的作爲類型。

對於「投資組合」類型的點，工具頂部的顯示方式不同，並且必須有更多的數據，然後是「常規」點類型。

我遇到過這樣的問題，當conatiner div寬度很小時，我的模板不起作用，雖然當div的寬度很大時它工作正常。

Highstocks.js確實默認聚合時呈現圖表relativly小面積：http://api.highcharts.com/highstock#plotOptions.area.dataGrouping

當點細分電子郵件，他們失去了所有的附加屬性，只留下y屬性，如此複雜tooltop不會工作。

爲了解決這個問題，我不得不禁用數據groupping在圖表選項：

 plotOptions: { 
     series: { 
      dataGrouping: { 
       enabled: false 
      } 
     } 
    }, 

是一個療法的方式來顯示小圖複雜的工具提示沒有禁用dataGrouping？

Answer 1

問題是：'如何分組point.type'？ 我想你想按類型分組，然後在那個地方顯示n個點？或者是團體積分，但是在選項數量類型中？如果用戶將定義myCustomFancyProperty - 那又怎樣？從點彙總所有屬性？它變得越來越難...我能建議什麼是創建一個想法here與一些解釋/解決方案。

您總是可以從分組點的x值（this.x）中獲取，然後遍歷所有點（可通過this.points[0].series.options.data訪問），找到距離該時間戳最近的點並顯示所需的值。

Answer 2

as Pawel Fus建議，我循環遍歷所有點以找到最接近的值併爲每個分組點添加附加屬性。

這裏是整個formmater函數。

formatter: function() { 
      var tooltip = []; 
      //Тултип 
      for (var key in this.points) {//Если точка - пользователь 

       //прочитаем тип 
       var closestX = 0; 
       for (var j in this.points[key].series.options.data) { 
        if (Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x) < diff) { 
         closestX = j; 
        } 
        var diff = Math.abs(this.points[key].series.options.data[j].x - this.points[key].point.x); 
       } 

       this.points[key].point.type = this.points[key].series.options.data[closestX].type; 
       this.points[key].point.sum = this.points[key].series.options.data[closestX].sum; 
       this.points[key].point.netassets = this.points[key].series.options.data[closestX].netassets; 

       if (this.points[key].point.type == 'portfolio') { //если точка не пользователь 
        tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>' + 
         '<br/><b>'+ _('', 'Сумма активов: ') + _s(this.points[key].point.sum, 2) + '</b>' + 
         '<br/><b>'+ _('', 'Чистые активы: ') + _s(this.points[key].point.netassets, 2) +'</b> (<span style="color:' + ((this.points[key].point.change < 0)?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>'; 
       } else { 
        tooltip[key] = '<span style="color:' + this.points[key].series.color +'">' + this.points[key].series.name + '</span>: <b>'+ _s(this.points[key].point.y, 2) +'</b> (<span style="color:' + ((this.points[key].point.change < 0)?'#b86565':'#619000') +'">' + _s(this.points[key].point.change, 0) +'%</span>)<br/>'; 
       } 
      } 
      var tl = ''; 
      for (key in tooltip) { 
       tl += tooltip[key] 
      } 
      //Дата 
      var date = Highcharts.dateFormat('%d %b %Y', this.points[0].point.x); 

      tl = date + '<br/>' +tl; 
      return tl; 
     },