Highcharts 如何使用文本和图像作为x轴类别实现分组类别插件？在海图？
像这样的？这一个使用文本+图像作为一个xaxis类别。我的目标是将图像作为一个x轴类别，将文本标签作为另一个类别，就像分组的类别一样，只是示例仅将文本标签显示为类别Highcharts 如何使用文本和图像作为x轴类别实现分组类别插件？在海图？,highcharts,categories,Highcharts,Categories,像这样的？这一个使用文本+图像作为一个xaxis类别。我的目标是将图像作为一个x轴类别，将文本标签作为另一个类别，就像分组的类别一样，只是示例仅将文本标签显示为类别 $(function () { var categoryImgs = { 'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.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'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value +'" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
var elm = this.children.div1.className;
switch (elm) {
case "myToolTipAIA":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AIA</p>');
break;
case "myToolTipAMP":
$('#hoverboard').html('AMP');
break;
case "myToolTipAMP RPP":
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AMP RPP </p>');
break;
case "myToolTipFidelity Life":
$('#hoverboard').html('Fidelity Life');
break;
case "myToolTipAsteron Life":
$('#hoverboard').html('Asteron Life');
break;
}
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
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 '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
$（函数（）{
变量类别YMGS={
‘友邦保险’：‘友邦保险’；
打破
案例“MyToolTimap”：
$（'#hoverboard'）.html（'AMP'）；
打破
案例“MyToolTimap RPP”：
$（“#悬停板”）.html（“AMP-RPP”）；
打破
案例“myToolTipFidelity寿命”：
$（'#hoverboard'）.html（'Fidelity Life'）；
打破
案例“MyToolTipsteron Life”：
$（'#hoverboard'）.html（'Asteron Life'）；
打破
}
},
mouseout:函数（）{
$（'#悬停板'）.html（''）；
}
},
}
},
链接到：0，
类别：['AIA'，'AMP'，'AMP RPP'，'Asteron Life'，'Fidelity Life'，]，
图例：{
对齐：“右”，
x:-70，
垂直排列：“顶部”，
y:20，
浮动：是的，
背景色：（Highcharts.theme&&Highcharts.theme.legendBackgroundColorSolid）| |白色，
边框颜色：“#CCC”，
边框宽度：1，
影子：错
},
工具提示：{
格式化程序：函数（）{
返回“+this.x+”
+
this.series.name+'：'+this.y+'
+
“总计：”+this.point.stackTotal；
}
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”，
风格：{
textShadow:'0 0 3px黑色，0 0 3px黑色'
},
格式：“${y}”
}
}
},
系列：[{
名称：'保单费用'，
y:“$”+this.value，
数据：[200.1229045.78,71120]
}, {
名称：“WOP”，
数据：[150210.23150200100]
}, {
名称:"收入保障",，
数据：[89400258.132121152]
}, {
姓名：‘人寿保险’，
数据：[150210.23150200100]
} ]
});
});
#376#377categories:[]