Question

如何在Highcharts中钻取的向下图表上操作x轴样式？

例如，给定以下向下钻取图表，如何在图表的向下钻取版本中隐藏x轴标签（单击其中一列时显示）？

一般来说，似乎没有很多方法可以控制钻取下图的布局，这是正确的吗？

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Basic drilldown'
  },
  xAxis: {
    type: 'category'

  },

  legend: {
    enabled: false
  },

  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },

  series: [{
    name: 'Things',
    colorByPoint: true,
    data: [{
      name: 'Animals',
      y: 5,
      drilldown: 'animals'
    }, {
      name: 'Fruits',
      y: 2,
      drilldown: 'fruits'
    }, {
      name: 'Cars',
      y: 4,
      drilldown: 'cars'
    }]
  }],
  drilldown: {
    series: [{
      id: 'animals',
      data: [
        ['Cats', 4],
        ['Dogs', 2],
        ['Cows', 1],
        ['Sheep', 2],
        ['Pigs', 1]
      ]
    }, {
      id: 'fruits',
      data: [
        ['Apples', 4],
        ['Oranges', 2]
      ]
    }, {
      id: 'cars',
      data: [
        ['Toyota', 4],
        ['Opel', 2],
        ['Volkswagen', 2]
      ]
    }]
  }
});

<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

Highcharts中的向下钻取机制仅负责处理系列，但它会启动可用于应用更新的drilldown和dillup个事件：

  chart: {
    type: 'column',
    events: {
      drilldown: function() {
        this.xAxis[0].update({
          labels: {
            enabled: false
          }
        });
      },
      drillup: function() {
        this.xAxis[0].update({
          labels: {
            enabled: true
          }
        }, false);
      }
    }
  }

现场演示： http://jsfiddle.net/kkulig/11qhaffe/

API参考：

在钻取期间隐藏非聚合列中的轴标签

1 个答案: