我有一个带有向下钻取的柱形图。这是我的DEMO
向下钻取只显示一个点。现在我想做的是：
在向下钻取中，我想将列栏移动到最左侧，而不是当前的中间位置。这样我就可以使用 Highcharts 渲染器 API 添加一些 HTML 文本元素。
我使用pointWidth选项减小了列的宽度，现在一个点看起来很糟糕，卡在中间。
我已经搜索了 Highcharts API 的所有选项，但我没有得到任何可以实现这一点的选项。有人知道吗？这是我的代码：
$(function () {
var renderer;
var groups = {};
(function (H) {
//DATALABELS
H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
var css = this.chart.options.drilldown.activeDataLabelStyle;
proceed.call(this);
css.textDecoration = 'none';
css.fontWeight = 'normal';
css.cursor = 'default';
css.color = 'blue';
H.each(this.points, function (point) {
if (point.drilldown && point.dataLabel) {
point.dataLabel
.css(css)
.on('click', function () {
return false;
});
}
});
});
//For X-axis labels
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
//console.log("series");
//console.log(series);
console.log("Point = ");
console.log(point.name);
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label') .css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto',
'color':'brown'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});//remove this "on" block to make axis labels clickable
}
}
else if (tickLabel && tickLabel._basicStyle)
{
}
return point;
});
})(Highcharts);
Highcharts.setOptions({
lang: {
//drillUpText: '<< Terug naar {series.name}'
}
});
// Create the chart
$('#container').highcharts({
colors:['red','orange','orange','green'],
tooltip:false,
chart: {
type: 'column',
events: {
drillup: function (e) {
//alert('drill Up');
show_hide_drilldown_texts('','');
/*console.log(this);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);*/
}
}
},
title: {
text: 'This is customized column chart'
},
xAxis: {
type: 'category',
/*categories: [
'Smallest Priority',
'Performance inprovement Priority',
'Performance inprovement Priority',
'Biggest Priority'
],*/
lineWidth: 2,
minorTickLength: 0,
tickLength: 0,
},
yAxis: {
lineWidth: 2,
gridLineWidth: 0,
minorGridLineWidth: 0,
allowDecimals: false,
min: 0,
title: {
text: 'Uplift Opportunity'
},
labels:{
enabled:false
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
/*point: {
events: {
click: function() {alert(this.name);
var drilldown = this.drilldown;
if (drilldown) { // drill down
} else { // restore
}
}
}
},*/
//pointPadding: 0.2,
//borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
align: 'center',
color: '#FFFFFF',
inside: true//,
//overflow:"justify"
},
pointPadding: 0.1,
groupPadding: 0
}
},
series: [{
name: 'Main',
colorByPoint: true,
data: [{
name: 'Smallest Priority',
y: 2,
drilldown: 'priority1',
dataLabels: {
format: 'This is column 1'
},
events:{
click: function() {//console.log(this);
//alert("hey");
show_hide_drilldown_texts('group1','show');
}
}
}, {
name: 'Performance improvement Priority',
y: 3,
drilldown: 'priority2',
dataLabels: {
format: 'This is column 2'
},
events:{
click: function() {
show_hide_drilldown_texts('group2','show');
}
}
}, {
name: 'Performance improvement Priority',
y: 4,
drilldown: 'priority3',
dataLabels: {
format: 'This is column 3'
},
events:{
click: function() {
show_hide_drilldown_texts('group3','show');
}
}
}, {
name: 'Biggest Priority',
y: 5,
drilldown: 'priority4',
dataLabels: {
format: 'This is column 4'//,
//overflow:"justify"
},
events:{
click: function() {
show_hide_drilldown_texts('group4','show');
}
}
}]
}],
drilldown: {
series: [
{
id: 'priority1',
color:"Gray",
pointWidth:80,
dataLabels: {
format: 'This is drilldown of column 1'
},
data: [
['Smallest Priority', 2]
]
},
{
id: 'priority2',
color:"Gray",
pointWidth:80,
dataLabels: {
format: 'This is drilldown of column 2'
},
data: [
['Performance improvement Priority', 3]
]
},
{
id: 'priority3',
color:"Gray",
pointWidth:80,
dataLabels: {
format: 'This is drilldwon of column 3'
},
data: [
['Performance improvement Priority', 4]
]
},
{
id: 'priority4',
color:"Gray",
pointWidth:80,
dataLabels: {
format: 'This is drilldwon of column 4'
},
data: [
['Biggest Priority', 5]
]
}
]
}
}, function(chart) { // on complete
renderer = chart.renderer;
group = renderer.g().add();
group2 = renderer.g().add();
groups.group1 = renderer.g().add();
groups.group2 = renderer.g().add();
groups.group3 = renderer.g().add();
groups.group4 = renderer.g().add();
var drilldown_text_1 = renderer.text('This is <span style="color: red">drilldown text 1</span> and <a href="http://example.com">linked</a>', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
}).add(groups.group1);
var drilldown_text_2 = renderer.text('This is <span style="color: blue">drilldown text 2</span> and <a href="http://example.com">linked</a>', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
}).add(groups.group2);
var drilldown_text_3 = renderer.text('This is <span style="color: blue">drilldown text 3</span> and <a href="http://example.com">linked</a>', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
}).add(groups.group3);
var drilldown_text_4 = renderer.text('This is <span style="color: blue">drilldown text 4</span> and <a href="http://example.com">linked</a>', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
}).add(groups.group4);
});
/*
console.log("renderer = ");
console.log(renderer);
*/
//console.log("groups = ");
//console.log(groups);
//groups.group2.hide();
show_hide_drilldown_texts('','');
function show_hide_drilldown_texts(text_group_name, action)
{
//alert('show_hide_drilldown_texts text_group_name = '+text_group_name+ ' action = '+action);
$.each( groups, function( key, elem ) {
//console.log('key');console.log(key);
//console.log('elem');console.log(elem);
if(text_group_name != '' && action == "show" && key == text_group_name)
{
elem.show();
}
else
{
elem.hide();
}
});
}
});