Is there a maximum number of x-Axis items in HighCharts

问题

I am using HighCharts to make a 3 level drilldown.

When I use over 50 items at the second level, the item text no longer displays on the left. Click on the first item (Parent 1) and then you will see the second level and what is not displaying.

Is this due to the amount of JSON data I am using?

Here is the code I am using for the chart

let options = {
chart: {
    type: 'bar',
    events: {
        drilldown: function (e) {
            if (e.seriesOptions) {
                e.seriesOptions.hiddenValue = e.point.options.hiddenValue;
            }
        }
  }
},
title: {
    text: 'Overall Status'
},
xAxis: {
    type: 'category',
    labels: {
        style: {
            fontSize: '15px'
        }
    }
},
yAxis: {
    title:{
            text: "Percentage Complete"
        },
    labels: {
        style: {
            fontSize: '15px'
        }
    }
},

legend: {
    enabled: false
},

plotOptions: {
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: true,
            style: {
                fontSize: '20px'
            }
        },
        cursor: 'pointer',
        point: {
            events: {
                click: function () {
                    let seriesOptions = this.series && this.series.options;
                    let hiddenValue = seriesOptions && seriesOptions.hiddenValue;
                    if(this.options && this.options.url) {
                        location.href = this.options.url + '?id=' + hiddenValue;
                    }
                }
            }
        }
    }
},
series: [{
    name: 'Status',
    colorByPoint: true
}],
drilldown: {
}
};

I have a fiddle here that has the JSON data. https://jsfiddle.net/mark2017/yb3y9dt9/

回答1:

You can see that the first drilldown does not start from 0 value, instead it starts from 10 - like it would count in all the values from the top level series. It is a bug which was already reported on github: Drilldown to more than 50 - skip categories name

Setting cropTreshold to a number bigger than the number of all your points seems to work in your case - it must be set for all series, e.g. in plotOptions.series

plotOptions: {
  series: {
    cropThreshold: 2000,
    borderWidth: 0,

example: https://jsfiddle.net/hfpofx28/

来源：https://stackoverflow.com/questions/42378342/is-there-a-maximum-number-of-x-axis-items-in-highcharts

标签

javascript

jquery

Highcharts