Highcharts 向下钻取边距

Question

不幸的是，向上钻取按钮经常落在图表的顶部。我想将 marginTop 应用于向下钻取图，以便该图始终位于按钮下方。这个我用过example。如您所见，该按钮位于柱形图的顶部。 HTML

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

JavaScript

$(function() {

// Create the chart
$('#container').highcharts({
chart: {
  type: 'column',
  events: {
    drilldown: function(e) {
      if (!e.seriesOptions) {
        var drilldowns = {
          'animals': {
            name: 'Cats',
            color: '#fa7921',
            drilldown: 'Cats',
            data: [
              ['2014', 10],
              ['2015', 10],
              ['2016', 15],
            ]
          }
        },
            drilldowns2 = {
              'animals': {
                name: 'Cows',
                color: '#9bc53d',
                data: [
                  ['2014', 13],
                  ['2015', 15],
                  ['2016', 15]
                ]
              }
            },
            drilldowns3 = {
              'animals': {
                name: 'Sheep',
                color: '#e55934',
                data: [
                  ['2014', 13],
                  ['2015', 15],
                  ['2016', 15]
                ]
              }
            };

        this.addSingleSeriesAsDrilldown(e.point, drilldowns[e.point.name]);
        this.addSingleSeriesAsDrilldown(e.point, drilldowns2[e.point.name]);
        this.addSingleSeriesAsDrilldown(e.point, drilldowns3[e.point.name]);
        this.applyDrilldown();
      }
    }
  }
},
title: {
  text: 'Async drilldown'
},
xAxis: {
  type: 'category'
},

legend: {
  enabled: false
},

plotOptions: {
  series: {
    stacking: 'normal',
    borderWidth: 0,
    dataLabels: {
      enabled: true
    }
  }
},

series: [{
  name: 'Cats',
  color: '#fa7921',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}, {
  name: 'Cows',
  color: '#9bc53d',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}, {
  name: 'Sheep',
  color: '#e55934',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}],

drilldown: {
  series: []
}
});
});

希望有人知道一个简单的解决方案。

Answer 1

检查 drilldown.drillUpButton 文档

更新您的 drilldown

   drilldown: {
      drillUpButton: {
        relativeTo: 'spacingBox',
        position: {
          y: 0,
          x: 0
        }
      },
      series: []
    }

$(function() {

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        drilldown: function(e) {
          if (!e.seriesOptions) {
            var drilldowns = {
                'animals': {
                  name: 'Cats',
                  color: '#fa7921',
                  drilldown: 'Cats',
                  data: [
                    ['2014', 10],
                    ['2015', 10],
                    ['2016', 15],
                  ]
                }
              },
              drilldowns2 = {
                'animals': {
                  name: 'Cows',
                  color: '#9bc53d',
                  data: [
                    ['2014', 13],
                    ['2015', 15],
                    ['2016', 15]
                  ]
                }
              },
              drilldowns3 = {
                'animals': {
                  name: 'Sheep',
                  color: '#e55934',
                  data: [
                    ['2014', 13],
                    ['2015', 15],
                    ['2016', 15]
                  ]
                }
              };

            this.addSingleSeriesAsDrilldown(e.point, drilldowns[e.point.name]);
            this.addSingleSeriesAsDrilldown(e.point, drilldowns2[e.point.name]);
            this.addSingleSeriesAsDrilldown(e.point, drilldowns3[e.point.name]);
            this.applyDrilldown();
          }
        }
      }
    },
    title: {
      text: 'Async drilldown'
    },
    xAxis: {
      type: 'category'
    },

    legend: {
      enabled: false
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        borderWidth: 0,
        dataLabels: {
          enabled: true
        }
      }
    },

    series: [{
      name: 'Cats',
      color: '#fa7921',
      data: [{
        name: 'animals',
        y: 5,
        drilldown: true
      }]
    }, {
      name: 'Cows',
      color: '#9bc53d',
      data: [{
        name: 'animals',
        y: 5,
        drilldown: true
      }]
    }, {
      name: 'Sheep',
      color: '#e55934',
      data: [{
        name: 'animals',
        y: 5,
        drilldown: true
      }]
    }],

    drilldown: {
      drillUpButton: {
        relativeTo: 'spacingBox',
        position: {
          y: 0,
          x: 0
        }
      },
      series: []
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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 2

在 drilldown 事件中更新图表的 marginTop：

        this.update({
          chart: {
            marginTop: 50
          }
        }, false);

并在 drillup 事件中恢复：

      this.update({
        chart: {
          marginTop: 10
        }
      }, false);

现场演示： http://jsfiddle.net/BlackLabel/a0va2b1x/

注意 update() 的第二个参数是 false - 此处不需要重绘图表。

Highcharts 向下钻取边距

Highcharts drill down margin

jquery

highcharts

settings

drilldown