Highcharts在分页时不改变x轴标签

Question

I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)

I have tried adding "xAxis" option inside the highcharts portion but still had no luck.

  pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            labels: {
                formatter: function(){
                    return this.value;
                }
             }
        },
        series: [{
            data: []
        }]
    }); 

and

pie = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        xAxis: {
            labels: {
                  format: '{value}'
              }
        },
        series: [{
            data: []
        }]
    });

Can someone help me regarding on what I am missing in this example? It will be very much appreciated.

Answer 1

You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to

pie.series[0].setData( data.slice(from, to), true, true, false );

xAxis: {
            type: 'category'
        },

Example: http://jsfiddle.net/kpxp4/8/

Answer 2

I am able to change the x-axis labels accordingly by adding

pie.xAxis[0].update({
    categories: category.slice(from, to)
})

after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the

xAxis: {
        type: 'category'
}

portion, as suggested by @Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).

Here is the link to the jsfiddle .

Hope this could be of any help, too.