HighStocks/HighCharts 滚动条不显示大型数据集导致 xAxis 标签消失并使条不显示答案

【问题标题】：HighStocks/HighCharts scrollbar not displaying with large datasets causing xAxis labels to disappear and making bars not showHighStocks/HighCharts 滚动条不显示大型数据集导致 xAxis 标签消失并使条不显示
【发布时间】：2017-08-09 22:57:07
【问题描述】：

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

您将在此链接中看到上述问题的样子： 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]]
    }]
});

【问题讨论】：

标签： javascript html highcharts

【解决方案1】：

发生这种情况是因为系列中的点数大于cropThreshold 属性的默认值（更多信息请参见下文的 API 参考部分）。作为一种解决方案，设置具有较大值的属性。

API 参考：
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold

示例：
https://jsfiddle.net/q8pn2dwf/

【讨论】：