如何使 xAxis 标签与条形图的位置匹配

Question

我用highchart js库制作了一个向下钻取的条形图，其中列具有不同的间隔。因为我想制作不同大小的条形图，所以我使用加载和渲染函数来更改条形图的大小。

现在我想知道如何使 xAxis 标签与每个条形的当前位置匹配。另外我的工具提示和数据标签与xAxis标签有相同的问题，我想知道如何解决这个问题？

// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
this.series[0].data[0].graphic.attr({
x: 10,
width: 20
});
this.series[0].data[1].graphic.attr({
x: 80,
width: 40
});
this.series[0].data[2].graphic.attr({
x: 150,
width: 80
});
},
render: function() {
console.log(this.series[0].options._levelNumber)
if (this.series[0].options._levelNumber == 0) {
this.series[0].data[0].graphic.attr({
x: 10,
width: 20
});
this.series[0].data[1].graphic.attr({
x: 80,
width: 40
});
this.series[0].data[2].graphic.attr({
x: 150,
width: 80
});
}
}
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category',
title: {
enabled: true,
text: "Percentage Range"
}
},
yAix: {
title: {
enabled: true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: '100-70%',
y: 5,
drilldown: '100-70%'
}, {
name: '70-30%',
y: 2,
drilldown: '70-30%'
}, {
name: '30-0%',
y: 4,
drilldown: '30-0%'
}]
}],
drilldown: {
series: [{
id: '100-70%',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: '70-30%',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: '30-0%',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

您可以使用pointPadding或pointWidth定义每个数据系列，而不是使用 event 来更改列的宽度。这将正确显示图表

系列将是

series: [{
name: 'Things',
colorByPoint: true,
pointPadding: 0,
// pointWidth:80, you can use this as well
data: [{
name: '100-70%',
y: 5,
drilldown: '100-70%',
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.2,
// pointWidth:100, you can use this as well
data: [{
name: '70-30%',
y: 2,
drilldown: '70-30%'
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.3,
// pointWidth:120, you can use this as well
data: [{
name: '30-0%',
y: 4,
drilldown: '30-0%'
}]
}],

小提琴示范

Answer 2

你在load和render函数中做了什么？ 如果删除它，看起来一切正常：

Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category',
title:{
enabled:true,
text: "Percentage Range"
}
},
yAix:{
title:{
enabled:true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: '100-70%',
y: 5,
drilldown: '100-70%'
}, {
name: '70-30%',
y: 2,
drilldown: '70-30%'
}, {
name: '30-0%',
y: 4,
drilldown: '30-0%'
}]
}],
drilldown: {
series: [{
id: '100-70%',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: '70-30%',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: '30-0%',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});

https://jsfiddle.net/w13u9hk9/1/