javascript - HighStocks/HighCharts 滚动条不显示大型数据集导致 xAxis 标签消失并使条形图不显示

Question

我正在创建一个 HighStock 柱状条形图。我使用 scrollbar: enabled 启用了滚动条。滚动条适用于较小的数据集，但这个数据集有很多类别(我只包含了我需要的一半)。出于某种原因，在某个数字之后，条形图的矩形将无法正确显示(或显示错误的值)并且 xAxis 标签显示为数字而不是它们的实际名称。此外，我正在尝试向每个条形添加 ID 以添加点击事件，但它只会将 ID 添加到最初正确呈现的条形。我还注意到，即使使用滚动条，我也可以正确地将 ID 添加到较小的数据集，因为所有矩形元素都已正确呈现。有没有办法让这个滚动条适用于更大的数据集？

您将在此链接中看到上述问题的内容: https://jsfiddle.net/sauravvenkat/96ue59qy/

Highcharts.chart('container', {
    chart: {
        type: 'column',
        color: 'rgb(245,111,35)',
    },
    title: {
        text: 'Physicians By Specialty'
    },
    subtitle: {
        text: 'Source: Physician Specaialty'
    },
    xAxis: {
        type: 'category',
        title: {
            text: null
        },
        scrollbar: {
            enabled: true
        },
        // min: 0,
        max: 7,
        tickLength: 0,
        labels: {
            rotation: -60
        }
    },
    yAxis: {
        title: {
            text: 'Profiles',
            align: 'high'
        }
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Totals',
        color: 'rgb(245,111,35)',
        data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]]
    }]
});

Answer 1

发生这种情况是因为系列中的点数大于 cropThreshold 属性的默认值(更多信息在下面的 API 引用部分)。作为解决方案，将属性设置为较大的值。

API 引用:
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold

例子:
https://jsfiddle.net/q8pn2dwf/