回到最基本的我的代碼，並在highcharts演示後，原來的「下載」按鈕，在customEvents.js而不是exporting.js觸發點擊事件。在我刪除了對customEvents.js的引用後，下載按鈕再次工作。然而，這不是一個解決方案，我還需要customEvents我的鼠標懸停，因此，這是highcharts customEvents插件的錯誤。
http://jsfiddle.net/q46WQ/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>
<script type="text/javascript">
$(function() {
var categoryImgs = {
'Banana': '<img src="/images/2.png"><img> ',
'Orange': '<img src="/images/8.png"><img> ',
'Fruit': '<img src="/images/12.png"><img> ',
'Apple': '<img src="/images/4.png"><img> ',
'Coconut': '<img src="/images/3.png"><img> '
};
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'
},
xAxis: {
categories: ['Banana', 'Fruit', 'Orange', 'Apple', 'Coconut'],
labels: {
x: 5,
useHTML: true,
formatter: function() {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function (e) {
var elm = e.currentTarget.children.div1.className;
switch (elm) {
case "myToolTipBanana":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/2.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$89</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$150</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$150</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$200.12</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$514.55<b></td></tr>' + '</table>');
break;
case "myToolTipFruit":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/8.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$400</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$186.76</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$210.23</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$290</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$1086.99<b></td></tr>' + '</table>');
break;
case "myToolTipOrange":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/12.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$258.13</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$150</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$143.50</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$45.78</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$597.41<b></td></tr>' + '</table>');
break;
case "myToolTipApple":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/3.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$212</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$200</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$219</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$71</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$702<b></td></tr>' + '</table>');
break;
case "myToolTipCoconut":
document.getElementById('hoverboard').style.display = "block";
$('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/4.png"><img> <div class="desc">39 year old female non smoker - Occupation Class 1</div><table>' +
'<tr><td><b>Jam</b><span id="italics"> (2 Week wait)</td><td>$80,000</td><td class="pad">$152</td></tr>' +
'<tr><td><b>Fruit</b><span id="italics"> (2 Week wait)</td><td>-</td><td class="pad">$100</td></tr>' +
'<tr><td><b>Candy</b></td><td>Nil Excess</td><td class="pad">$143</td></tr>' +
'<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">Boxes</span></td><td></td><td class="pad">$120</td></tr>' +
'<tr bgcolor="#EDF7F7"><td style="font-size:14px;"><b>Total Premium (Monthly)</b></td><td></td><td class="pad"><b>$515<b></td></tr>' + '</table>');
break;
}
},
mouseout: function() {
document.getElementById('hoverboard').style.display = "none";
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['Banana', 'Fruit', 'Orange', 'Apple', 'Coconut'],
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function() {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black',
},
formatter: function() {
totals[i++] = this.total;
return '';
},
}
},
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 this.series.name + ', ' + this.x + ', ' +' $'+ this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: 'normal',
borderWidth:0,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Jam',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120],
color: '#B9B6BA',
}, {
name: 'Fruit',
data: [150, 186.76, 150, 200, 100],
color: '#E5764C'
}, {
name: 'Candy',
data: [89,400, null , 212, 152],
color: '#9D8365'
}, {
name: 'Boxes',
data: [75.43, 210.23, 143.50, 219, 143],
color: '#9F7AC3'
} ]
});
});
</script>
只是想知道，均高於highcharts插件腳本？這意味着它的使用非常簡單，只需包含正確的腳本，它應該可以直接使用。對於像我這樣的人來說，這還是個好消息，可以學習高分榜。 – icedwater