하이 차트 - 확대했을 때 잘못된 툴팁 위치

Question

여러분, 하이 차트에 버그가 있거나 코드가 발견 된 것 같습니다 ... 어느 쪽이든 큰 도움을 주시면 고맙겠습니다! 완성도를 들어

http://jsfiddle.net/wC3u7/4/

내가 너무 여기에 코드를 게시 할 수 있습니다 :

HTML :

<div id="salesReport"></div>

JS :

여기 JSFiddle의 코드를 준비했습니다

$(function() { 

    var perShapeGradient = { 
    x1: 0, 
    y1: 0, 
    x2: 1, 
    y2: 0 
    }; 

    var colors = Highcharts.getOptions().colors; 

    colors = [{ 
    linearGradient: perShapeGradient, 
    stops: [ 
     [0, '#2c95c2'], 
     [1, '#0074a6'] 
    ] 
    }, { 
    linearGradient: perShapeGradient, 
    stops: [ 
     [0, '#76b978'], 
     [1, '#0db381'] 
    ] 
    }]; 


    var weekDates = { 
    "20121": "2012-01-02", 
     "20122": "2012-01-09", 
     "20123": "2012-01-16", 
     "20124": "2012-01-23", 
     "20125": "2012-01-30", 
     "20126": "2012-02-06", 
     "20127": "2012-02-13", 
     "20128": "2012-02-20", 
     "20129": "2012-02-27", 
     "201210": "2012-03-05", 
     "201211": "2012-03-12", 
     "201212": "2012-03-19", 
     "201213": "2012-03-26", 
     "201214": "2012-04-02", 
     "201215": "2012-04-09", 
     "201216": "2012-04-16", 
     "201217": "2012-04-23", 
     "201218": "2012-04-30", 
     "201219": "2012-05-07", 
     "201220": "2012-05-14", 
     "201221": "2012-05-21", 
     "201222": "2012-05-28", 
     "201223": "2012-06-04", 
     "201224": "2012-06-11", 
     "201225": "2012-06-18", 
     "201226": "2012-06-25", 
     "201227": "2012-07-02", 
     "201228": "2012-07-09", 
     "201229": "2012-07-16", 
     "2": "2012-07-23", 
     "2": "2012-07-30", 
     "2": "2012-08-06", 
     "2": "2012-08-13", 
     "2": "2012-08-20", 
     "2": "2012-08-27", 
     "2": "2012-09-03", 
     "2": "2012-09-10", 
     "2": "2012-09-17", 
     "2": "2012-09-24", 
     "201240": "2012-10-01", 
     "201241": "2012-10-08", 
     "201242": "2012-10-15", 
     "201243": "2012-10-22", 
     "201244": "2012-10-29", 
     "201245": "2012-11-05", 
     "201246": "2012-11-12", 
     "201247": "2012-11-19", 
     "201248": "2012-11-26", 
     "201249": "2012-12-03", 
     "201250": "2012-12-10", 
     "201251": "2012-12-17", 
     "201252": "2012-12-24", 
     "201253": "2012-12-31" 
    }; 


    var salesChart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'salesReport', 
     zoomType: 'x', 
     type: 'column' 
    }, 
    credits: { 
     enabled: false 
    }, 
    colors: colors, 
    title: { 
     margin: 40, 
     style: { 
     fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' 
     }, 
     text: 'Buyer Revenue Chart' 
    }, 
    subtitle: { 
     style: { 
     fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', 
     fontSize: '14px' 
     }, 
     text: '<div class="chart-subtitle">' + 
     '<span class="text-danger">Low <strong>23234</strong></span>' + 
     '<span class="text-success">High <strong>23234</strong></span>' + 
     '<span class="text-info">Average <strong>23234</strong></span>' + 
     '</div>', 
     useHTML: true 
    }, 
    xAxis: { 

     categories: [20121, 20122, 20123, 20124, 20125, 20126, 20127, 20128, 20129, 201210, 201211, 201212, 201213, 201214, 201215, 201216, 201217, 201218, 201219, 201220, 201221, 201222, 201223, 201224, 201225, 201226, 201227, 201228, 201229, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 201240, 201241, 201242, 201243, 201244, 201245, 201246, 201247, 201248, 201249, 201250, 201251, 201252, 201253], 

     title: { 
     margin: 15, 
     style: { 
      color: 'black', 
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', 
      fontSize: '13px' 
     }, 
     text: 'Week Number' 
     }, 
     labels: { 
     step: 2, 
     formatter: function() { 
      return this.value.toString().substring(4, 6); 
     } 
     } 
    }, 
    yAxis: { 
     gridLineColor: '#eee', 
     min: 0, 
     title: { 
     margin: 15, 
     style: { 
      color: 'black', 
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', 
      fontSize: '13px' 
     }, 
     text: focus 
     }, 
     stackLabels: { 
     enabled: false 
     } 
    }, 
    legend: { 
     align: 'right', 
     x: -100, 
     verticalAlign: 'top', 
     y: 20, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
     borderColor: '#eee', 
     borderRadius: '3px', 
     borderWidth: 1, 
     shadow: false 
    }, 
    tooltip: { 
     formatter: function() { 
     var chart = this.series.chart; 

     var categories = chart.xAxis[0].categories; 
     var date = new Date(weekDates[this.x]); 
     var index = 0; 
     var text = '<div><b>' + date.getDate() + date.getPrefix() + ' ' + date.getRealMonth() + ', ' + date.getFullYear() + '</b></div><br /><table class="tooltable"><tbody>'; 

     while (this.x !== categories[index]) { 
      index++; 
     } 

     $.each(chart.series, function (i, series) { 
      text += '<tr>' + 
      '<td><b>' + series.name + ': </b></td>' + 
      '<td>' + series.data[i].y + '</td>' + 
      '</tr>'; 
     }); 

     text += '<tr>' + 
      '<td><b>Total: </b></td>' + 
      '<td>' + this.point.stackTotal + '</td>' + 
      '</tr></tbody></table>'; 

     return text; 
     }, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
     dataLabels: { 
      enabled: false 
     }, 
     groupPadding: 0.1, 
     pointPadding: 0, 
     stacking: 'normal' 
     } 
    }, 
    series: [{ 
     name: 'Customer Order', 
     data: [2741600.12, 3240819.76, 2777109.68, 2832506.66, 2844861.41, 2657199.98, 2507996.89, 2581876.56, 2695478.28, 2715245.81, 2733065.46, 2773672.25, 2687606.05, 2110458.68, 2725741.05, 2919983.30, 2900213.99, 2991106.30, 2607697.77, 2850981.10, 2822168.71, 2634608.38, 1949254.79, 2879637.62, 2670026.79, 2658833.86, 2797097.39, 3077176.21, 2917786.83, 2808457.90, 2641205.61, 2783867.42, 2626519.93, 2846650.78, 2616641.59, 2845208.49, 2691537.53, 2786656.16, 2780019.11, 2856012.46, 2771617.11, 2667414.66, 2693243.67, 2827067.84, 2848628.11, 3223905.16, 2979840.25, 3427409.91, 3495786.77, 4378081.79, 3555828.67, 1144316.55, 2331124.51] 
    }, { 
     name: 'B2b Order', 
     data: [655473.07, 865458.44, 797091.52, 986566.36, 897996.55, 914141.73, 811640.52, 829083.96, 907238.36, 851204.55, 867928.10, 884580.53, 861696.87, 555044.39, 610552.84, 852144.94, 1018430.40, 968275.48, 684276.99, 883282.90, 856661.99, 758853.96, 492659.84, 787532.12, 824337.42, 1016273.86, 842751.01, 883214.33, 978982.08, 859595.15, 892508.61, 834111.07, 774825.16, 860221.95, 766293.83, 900244.12, 896646.90, 819320.00, 896513.77, 923858.67, 912036.93, 922822.48, 874728.95, 909200.43, 838450.91, 911709.43, 1018102.85, 1022509.59, 949326.62, 1209897.51, 900874.52, 135964.34, 584075.05] 
    }] 
    }); 

    Array.prototype.max = function() { 
    return Math.max.apply(Math, this); 
    }; 

    Array.prototype.min = function() { 
    return Math.min.apply(Math, this); 
    }; 

    Date.prototype.getRealMonth = function() { 
    if (this.getMonth() === 0) { 
     return "January"; 
    } 

    if (this.getMonth() == 1) { 
     return "February"; 
    } 

    if (this.getMonth() == 2) { 
     return "March"; 
    } 

    if (this.getMonth() == 3) { 
     return "April"; 
    } 

    if (this.getMonth() == 4) { 
     return "May"; 
    } 

    if (this.getMonth() == 5) { 
     return "June"; 
    } 

    if (this.getMonth() == 6) { 
     return "July"; 
    } 

    if (this.getMonth() == 7) { 
     return "August"; 
    } 

    if (this.getMonth() == 8) { 
     return "September"; 
    } 

    if (this.getMonth() == 9) { 
     return "October"; 
    } 

    if (this.getMonth() == 10) { 
     return "November"; 
    } 

    if (this.getMonth() == 11) { 
     return "December"; 
    } 
    }; 

    Date.prototype.getPrefix = function() { 
    switch (this.getDate()) { 
     case 1: 
     case 21: 
     case 31: 
     return 'st'; 
     case 2: 
     case 22: 
     return 'nd'; 
     case 3: 
     case 23: 
     return 'rd'; 
     default: 
     return 'th'; 
    } 
    }; 

}); 

확대하면 차트에서 (차트의 영역을 선택한 다음) 내가 겪고있는 문제를 볼 수 있어야하는 열 위로 마우스를 가져갑니다. 툴팁은 마치 확대되지 않았을 때의 위치를 ​​표시하려고하는 것처럼 거의 오프셋되어있는 것처럼 보입니다.

그래서, 무슨 일이 벌어지고 있는지에 대한 단서가 있습니까?

어떤 도움을 주셔서 감사합니다.

Answer 1

문제가 없다고 생각합니다. 하이 차트의 최신 버전에서 이미 수정되었을 가능성이 있습니다.

그것은으로 확대 한 후 다음과 같습니다 제대로 일을 넣은 사람은 아니다 경우

Answer 2

당신은 당신의 자신의 툴팁의 위치 결정 기능을 쓸 수 있습니다 : 버전 3에

tooltip: { 
    positioner: 
     function(boxWidth, boxHeight, point) {   
     return {x:point.plotX + 20, y:point.plotY - 20 
     };   
    } 
} 

Answer 3

업그레이드 highcharts 나를 위해 문제를 해결했다.