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

Question

I made a drill down bar chart with highchart js library where the columns have different intervals.Because I want to make different size of bars, I used load and render function to change the size of the bars.

Now I wonder how to make the xAxis labels match the current position of each bar.Also my tooltip and data labels have the same problems as xAxis labels,I wonder how to solve this problem?

 // 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

What you do in load and render functions? If delete it, looks like everything is ok:

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/

Answer 2

Instead of using event to change the width of the columns,you can define with of each data series either using pointPadding or pointWidth . This display the chart properly

Series will be

  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%'
    }]
  }],

Fiddle demonstration