javascript - 删除 highcharts 中的 drown 上的 TickInterval

Question

我面临的问题是在向下钻取时，刻度间隔标签仍然存在于轴上，在向上钻取时，我需要我的刻度间隔为 0.5，但在向下钻取时，我不想要任何刻度间隔，这样它们就不会' t 显示在 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/

Answer 1

您可以使用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