さて、皆さん、私はHighchartsのバグか、私のコードのどちらかを見つけたと思います...いずれにしても、これについての支援に大いに感謝します!ここでJSFiddleのコードを準備しました:
完全を期すために、ここにもコードを投稿します。
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';
}
};
});
グラフを拡大して(グラフ上の領域を選択して)、いずれかの列にカーソルを合わせると、私が直面している問題を確認できるはずです。ツールチップは、ズームインしていない場合にどこにあるかを表示しようとしているように、自分自身を相殺しているように見えます。
それで、誰かが何が起こっているのかについて何か手がかりを得ましたか?
助けてくれてありがとう。