2

さて、皆さん、私はHighchartsのバグか、私のコードのどちらかを見つけたと思います...いずれにしても、これについての支援に大いに感謝します!ここでJSFiddleのコードを準備しました:

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

完全を期すために、ここにもコードを投稿します。

HTML:

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

JS:

$(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",
      "201230": "2012-07-23",
      "201231": "2012-07-30",
      "201232": "2012-08-06",
      "201233": "2012-08-13",
      "201234": "2012-08-20",
      "201235": "2012-08-27",
      "201236": "2012-09-03",
      "201237": "2012-09-10",
      "201238": "2012-09-17",
      "201239": "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, 201230, 201231, 201232, 201233, 201234, 201235, 201236, 201237, 201238, 201239, 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';
    }
  };

});

グラフを拡大して(グラフ上の領域を選択して)、いずれかの列にカーソルを合わせると、私が直面している問題を確認できるはずです。ツールチップは、ズームインしていない場合にどこにあるかを表示しようとしているように、自分自身を相殺しているように見えます。

それで、誰かが何が起こっているのかについて何か手がかりを得ましたか?

助けてくれてありがとう。

4

3 に答える 3

1

独自のツールチップ位置決め関数を作成できます。

tooltip: {
   positioner: 
      function(boxWidth, boxHeight, point) {         
         return {x:point.plotX + 20, y:point.plotY - 20
      };         
   }
}
于 2013-01-18T13:38:17.180 に答える
1

ハイチャートをバージョン3にアップグレードすると、問題が解決しました。

于 2013-03-25T17:51:28.883 に答える
0

問題はないと思います。おそらく最新バージョンのhighchartsですでに修正されています。

ズームインすると次のようになります。 ここに画像の説明を入力してください

于 2013-04-24T13:20:31.487 に答える