我面临的问题是向下钻取刻度间隔标签仍在轴上，在向上钻取时我需要我的tickInterval为0.5，但在向下钻取时我不需要任何刻度间隔，这样它们就不会显示在x轴上，
如图所示，间隔为0.5，但是现在我向下钻取8.5时，它显示如下，并且间隔标签仍然存在
下面是我的代码
Highcharts.chart('container', {
chart: {
type: 'column',
events : {
drilldown : function(e) {
this.xAxis[0].setTitle({
text : 'MilestoneTypeId'
});
this.xAxis[0].tickmarkPlacement = 'off'
this.setTitle({ text: "Error Distribution by Milestone" });
},
drillup : function(e) {
this.xAxis[0].setTitle({
text : 'Mean Absolute Error (in days)'
});
this.xAxis[0].tickmarkPlacement = 'on'
this.setTitle({ text: "Error Distribution in Days" });
}
}
},
title: {
text: 'Error Distribution (Days)'
},
xAxis : {
title : {
text : 'Mean Absolute Error (in days)'
},
type: 'category',
tickInterval : 0.50,
crosshair : true
},
yAxis : {
title : {
text : 'Predicted Milestone Count'
}
},
tooltip : {
headerFormat : '',
shared : true,
pointFormat : 'Predicted Milestone Count : {point.y}'
},
series: [
{
name: "Error Distribution by Days Report",
data: [
{
"x":1.5,
"y":1000,
"drilldown":"1.5",
"name":1.5
},
{
"x":2,
"y":500,
"drilldown":"2",
"name":2
},
{
"x":2.5,
"y":500,
"drilldown":"2.5",
"name":2.5
},
{
"x":3.5,
"y":500,
"drilldown":"3.5",
"name":3.5
},
{
"x":4,
"y":500,
"drilldown":"4",
"name":4
},
{
"x":5,
"y":500,
"drilldown":"5",
"name":5
},
{
"x":6,
"y":500,
"drilldown":"6",
"name":6
},
{
"x":8.5,
"y":1000,
"drilldown":"8.5",
"name":8.5
},
{
"x":9,
"y":500,
"drilldown":"9",
"name":9
},
{
"x":10,
"y":3508,
"drilldown":"10",
"name":"More"
}
]
}
],
drilldown: {
series:[
{
"name":"2",
"id":"2",
"pointWidth":30,
"data":[
[
"Event33",
500
]
]
},
{
"name":"4",
"id":"4",
"pointWidth":30,
"data":[
[
"Event42",
500
]
]
},
{
"name":"5",
"id":"5",
"pointWidth":30,
"data":[
[
"Event11",
500
]
]
},
{
"name":"6",
"id":"6",
"pointWidth":30,
"data":[
[
"Event1",
500
]
]
},
{
"name":"9",
"id":"9",
"pointWidth":30,
"data":[
[
"Event23",
500
]
]
},
{
"name":"10",
"id":"10",
"pointWidth":30,
"data":[
[
"Event24",
501
],
[
"Event14",
1001
],
[
"Event2",
1
],
[
"Event3",
1001
],
[
"Event10",
1
],
[
"Event8",
1001
],
[
"Event1",
1
],
[
"Event5",
1
]
]
},
{
"name":"1.5",
"id":"1.5",
"pointWidth":30,
"data":[
[
"Event6",
500
],
[
"Event5",
500
]
]
},
{
"name":"2.5",
"id":"2.5",
"pointWidth":30,
"data":[
[
"Event4",
500
]
]
},
{
"name":"3.5",
"id":"3.5",
"pointWidth":30,
"data":[
[
"Event3",
500
]
]
},
{
"name":"8.5",
"id":"8.5",
"pointWidth":30,
"data":[
[
"Event2",
500
],
[
"Event1",
500
]
]
}
]
}
});
这是我的jsfiddle链接https://jsfiddle.net/L0mgdwc4/
最佳答案
您可以使用xAxis.update功能在钻取事件触发时禁用tickInterval，并使用相同的功能在钻取期间启用。
演示：https://jsfiddle.net/BlackLabel/zex8jfah/
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({
text: 'MilestoneTypeId'
});
this.xAxis[0].tickmarkPlacement = 'off'
this.setTitle({
text: "Error Distribution by Milestone"
});
this.xAxis[0].update({
tickInterval: 0,
})
},
drillup: function(e) {
this.xAxis[0].setTitle({
text: 'Mean Absolute Error (in days)'
});
this.xAxis[0].tickmarkPlacement = 'on'
this.setTitle({
text: "Error Distribution in Days"
});
this.xAxis[0].update({
tickInterval: 0.5,
})
}
}
API：https://api.highcharts.com/class-reference/Highcharts.Axis#update