Javascript 当退出缩放时,缩放功能会打断xAxis标签并创建图表间隙

Javascript 当退出缩放时,缩放功能会打断xAxis标签并创建图表间隙,javascript,highcharts,Javascript,Highcharts,我有一个启用缩放功能的繁忙柱状图。当我放大时,一切都很美好。单击“缩小”按钮时,视图中断。我的标签显示了它们的ID,图中显示了间隙和其他异常。下面是一些屏幕截图 当我放大时,这里有很多点。我的视图按预期工作,我在X上的标签很好。但是,当我重置缩放时,会发生以下情况: 请注意视图中没有条形图的剪辑,这看起来像我选择的组没有返回到视图中。然后,该系列的其余部分正常生成,但所有标签都显示了它们的结构ID(我相信),而不是它们的名称) 现在我有一个解决办法,限制视图只有50列,为什么是50列?太棒了

我有一个启用缩放功能的繁忙柱状图。当我放大时,一切都很美好。单击“缩小”按钮时,视图中断。我的标签显示了它们的ID,图中显示了间隙和其他异常。下面是一些屏幕截图

当我放大时,这里有很多点。我的视图按预期工作,我在X上的标签很好。但是,当我重置缩放时,会发生以下情况:

请注意视图中没有条形图的剪辑,这看起来像我选择的组没有返回到视图中。然后,该系列的其余部分正常生成,但所有标签都显示了它们的结构ID(我相信),而不是它们的名称)

现在我有一个解决办法,限制视图只有50列,为什么是50列?太棒了!但它的功能和平常一样,我一到51,它就崩溃了

另外,我使用的是HighchartsHighstock JS v5.0.6(我使用highstocks.JS依赖项来处理这个特定的图表,但它同样失败)

如果添加了JSFIDLE,这里有大量代码可以满足stackoverflow的“必须附带代码”子句的要求(虽然很可笑,但无论如何)

呕吐代码在3,2,1

    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                height : 600,
                zoomType: 'x'
            },
            credits: {
                enabled: false
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {
            },
            legend: {
                enabled: false
            },
                series: [{
                name: 'Category',
                colorByPoint: true,
            data : [{
                name : 'TSdsfsadfadsfdsaatry',
                y : 125716,
                svcunitname : 'ALL',
                categoryB : 'tsdsafasdfrm',
                },{
                name : 'Tfasdsadsadiew',
                y : 58407,
                svcunitname : 'ALL',
                categoryB : 'tsdasdfasdfdsaheRed',
                },{
                name : 'TSdsafasdfdasfata',
                y : 52125,
                svcunitname : 'ALL',
                categoryB : 'tsasdfasdfasfata',
                },{
                name : 'TSasdfasdfassdfasdfasdata',
                y : 43247,
                svcunitname : 'ALL',
                categoryB : 'tsasdfasdfdasfasdfasdrt',
                },{
                name : 'Tafdasdfasdfasddastry',
                y : 35517,
                svcunitname : 'ALL',
                categoryB : 'traasdfasdfasdson',
                },{
                name : 'TSsdfasdfasdfaw',
                y : 12569,
                svcunitname : 'ALL',
                categoryB : 'tssdafasdfasRed',
                },{
                name : 'Casdfasdfasfry',
                y : 8994,
                svcunitname : 'ALL',
                categoryB : 'home',
                },{
                name : 'PTfasdfasdfadsfa',
                y : 5665,
                svcunitname : 'ALL',
                categoryB : 'ptcTsadfamp',
                },{
                name : 'PTasdfasfdaste',
                y : 4079,
                svcunitname : 'ALL',
                categoryB : 'dhghasdfdfasfasd',
                },{
                name : 'hhtrhththrtrthrtrhrthrtrthrtt',
                y : 3543,
                svcunitname : 'ALL',
                categoryB : 'gfhdgghghghdghdfhdhtrrtrht',
                },{
                name : 'Stghgdgdgtails',
                y : 3460,
                svcunitname : 'ALL',
                categoryB : 'dghdfdghggdghddg',
                },{
                name : 'Wghgdggddfgdfgkly',
                y : 3260,
                svcunitname : 'ALL',
                categoryB : 'tsgfhdfggdgdes',
                },{
                name : 'TSgdhdgdfhails',
                y : 3143,
                svcunitname : 'ALL',
                categoryB : 'tsdghdgddghils',
                },{
                name : 'TSgghhddfghdfgew',
                y : 2918,
                svcunitname : 'ALL',
                categoryB : 'tsghrts',
                },{
                name : 'IntmAfghamp',
                y : 2769,
                svcunitname : 'ALL',
                categoryB : 'aerofghcs',
                },{
                name : 'Intmdghiew',
                y : 2742,
                svcunitname : 'ALL',
                categoryB : 'conghView',
                },{
                name : 'Tfghnds',
                y : 2534,
                svcunitname : 'ALL',
                categoryB : 'tsdfghnding',
                },{
                name : 'AVghS',
                y : 2030,
                svcunitname : 'ALL',
                categoryB : 'fuelfdghliance',
                },{
                name : 'Intfme',
                y : 1746,
                svcunitname : 'ALL',
                categoryB : 'aerdghragscore',
                },{
                name : 'EMdfhgdhends',
                y : 1737,
                svcunitname : 'ALL',
                categoryB : 'emsCfghrts',
                },{
                name : 'Loadfhration',
                y : 1703,
                svcunitname : 'ALL',
                categoryB : 'loadfhgimes',
                },{
                name : 'Wdg',
                y : 1693,
                svcunitname : 'ALL',
                categoryB : 'tfhharts',
                },{
                name : 'LHhhdance',
                y : 1510,
                svcunitname : 'ALL',
                categoryB : 'haulers',
                },{
                name : 'Operadghmary',
                y : 1442,
                svcunitname : 'ALL',
                categoryB : 'ptcTdSumm',
                },{
                name : 'Scogdhd',
                y : 1392,
                svcunitname : 'ALL',
                categoryB : 'scofghrd',
                },{
                name : 'Intmfghard',
                y : 1392,
                svcunitname : 'ALL',
                categoryB : 'sgfhd',
                },{
                name : 'Edfhghd',
                y : 1392,
                svcunitname : 'ALL',
                categoryB : 'scorefh',
                },{
                name : 'uipkk',
                y : 1392,
                svcunitname : 'ALL',
                categoryB : 'scor',
                },{
                name : 'chaard',
                y : 1392,
                svcunitname : 'ALL',
                categoryB : 'scorrd',
                },{
                name : 'LNFliance',
                y : 1179,
                svcunitname : 'ALL',
                categoryB : 'lnflianceB',
                },{
                name : 'TSrends',
                y : 1119,
                svcunitname : 'ALL',
                categoryB : 'tsrending',
                },{
                name : 'StoSub',
                y : 987,
                svcunitname : 'ALL',
                categoryB : 'stoSub',
                },{
                name : 'liance',
                y : 954,
                svcunitname : 'ALL',
                categoryB : 'liance',
                },{
                name : 'WKRown',
                y : 942,
                svcunitname : 'ALL',
                categoryB : 'rskly',
                },{
                name : 'AEers',
                y : 940,
                svcunitname : 'ALL',
                categoryB : 'aePie',
                },{
                name : 'DPUtt',
                y : 838,
                svcunitname : 'ALL',
                categoryB : 'dputt',
                },{
                name : 'Loas',
                y : 802,
                svcunitname : 'ALL',
                categoryB : 'loas',
                },{
                name : 'TSts',
                y : 749,
                svcunitname : 'ALL',
                categoryB : 'tUns',
                },{
                name : 'Sthersk',
                y : 737,
                svcunitname : 'ALL',
                categoryB : 'sterDtl',
                },{
                name : 'WKTr',
                y : 728,
                svcunitname : 'ALL',
                categoryB : 'eTo',
                },{
                name : 'ris',
                y : 678,
                svcunitname : 'ALL',
                categoryB : 'ris',
                },{
                name : 'LHPnce',
                y : 661,
                svcunitname : 'ALL',
                categoryB : 'lhShtail',
                },{
                name : 'Stort',
                y : 657,
                svcunitname : 'ALL',
                categoryB : 'stopad',
                },{
                name : 'WKSWUl',
                y : 649,
                svcunitname : 'ALL',
                categoryB : 'swuly',
                },{
                name : 'Pte',
                y : 634,
                svcunitname : 'ALL',
                categoryB : 'pte',
                },{
                name : 'Lst',
                y : 606,
                svcunitname : 'ALL',
                categoryB : 'lst',
                },{
                name : 'AEst',
                y : 579,
                svcunitname : 'ALL',
                categoryB : 'aeist',
                },{
                name : 'WDER ',
                y : 579,
                svcunitname : 'ALL',
                categoryB : 'emdfaasdfer',
                },{
                name : 'Ater',
                y : 560,
                svcunitname : 'ALL',
                categoryB : 'aver',
                },{
                name : 'Stth',
                y : 560,
                svcunitname : 'ALL',
                categoryB : 'stonth',
                },{
                name : 'LNail',
                y : 543,
                svcunitname : 'ALL',
                categoryB : 'lnail',
                },{
                name : 'Tasdfasdfasdfdsaw',
                y : 542,
                svcunitname : 'ALL',
                categoryB : 'tfefsafdafaasdfafn',
                },{
                name : 'Cefefefeeefeee',
                y : 535,
                svcunitname : 'ALL',
                categoryB : 'ceeeeeffdf',
                },{
                name : 'dsadfee',
                y : 535,
                svcunitname : 'ALL',
                categoryB : 'cRaddd',
                },{
                name : 'LasdfasdfsdP',
                y : 532,
                svcunitname : 'ALL',
                categoryB : 'lowHasdfdasfads',
                },]
            }],
        });
    });

对我来说,这绝对是个错误。您可以通过在xAxis上使用显式类别来解决这个问题

假设数据是按您拥有的方式定义的

      var data = [{
        name: 'TSdsfsadfadsfdsaatry',
        y: 125716,
        svcunitname: 'ALL',
        categoryB: 'tsdsafasdfrm',
      }, {
        name: 'Tfasdsadsadiew',
        y: 58407,
        svcunitname: 'ALL',
        categoryB: 'tsdasdfasdfdsaheRed',
      }, {
        name: 'TSdsafasdfdasfata',
        y: 52125,
        svcunitname: 'ALL',
        categoryB: 'tsasdfasdfasfata',
      }, {
        name: 'TSasdfasdfassdfasdfasdata',
        y: 43247,
        svcunitname: 'ALL',
        categoryB: 'tsasdfasdfdasfasdfasdrt',
      }, {
        name: 'Tafdasdfasdfasddastry',
        y: 35517,
        svcunitname: 'ALL',
        categoryB: 'traasdfasdfasdson',
      }, {
        name: 'TSsdfasdfasdfaw',
        y: 12569,
        svcunitname: 'ALL',
        categoryB: 'tssdafasdfasRed',
      }, {
        name: 'Casdfasdfasfry',
        y: 8994,
        svcunitname: 'ALL',
        categoryB: 'home',
      }, {
        name: 'PTfasdfasdfadsfa',
        y: 5665,
        svcunitname: 'ALL',
        categoryB: 'ptcTsadfamp',
      }, {
        name: 'PTasdfasfdaste',
        y: 4079,
        svcunitname: 'ALL',
        categoryB: 'dhghasdfdfasfasd',
      }, {
        name: 'hhtrhththrtrthrtrhrthrtrthrtt',
        y: 3543,
        svcunitname: 'ALL',
        categoryB: 'gfhdgghghghdghdfhdhtrrtrht',
      }, {
        name: 'Stghgdgdgtails',
        y: 3460,
        svcunitname: 'ALL',
        categoryB: 'dghdfdghggdghddg',
      }, {
        name: 'Wghgdggddfgdfgkly',
        y: 3260,
        svcunitname: 'ALL',
        categoryB: 'tsgfhdfggdgdes',
      }, {
        name: 'TSgdhdgdfhails',
        y: 3143,
        svcunitname: 'ALL',
        categoryB: 'tsdghdgddghils',
      }, {
        name: 'TSgghhddfghdfgew',
        y: 2918,
        svcunitname: 'ALL',
        categoryB: 'tsghrts',
      }, {
        name: 'IntmAfghamp',
        y: 2769,
        svcunitname: 'ALL',
        categoryB: 'aerofghcs',
      }, {
        name: 'Intmdghiew',
        y: 2742,
        svcunitname: 'ALL',
        categoryB: 'conghView',
      }, {
        name: 'Tfghnds',
        y: 2534,
        svcunitname: 'ALL',
        categoryB: 'tsdfghnding',
      }, {
        name: 'AVghS',
        y: 2030,
        svcunitname: 'ALL',
        categoryB: 'fuelfdghliance',
      }, {
        name: 'Intfme',
        y: 1746,
        svcunitname: 'ALL',
        categoryB: 'aerdghragscore',
      }, {
        name: 'EMdfhgdhends',
        y: 1737,
        svcunitname: 'ALL',
        categoryB: 'emsCfghrts',
      }, {
        name: 'Loadfhration',
        y: 1703,
        svcunitname: 'ALL',
        categoryB: 'loadfhgimes',
      }, {
        name: 'Wdg',
        y: 1693,
        svcunitname: 'ALL',
        categoryB: 'tfhharts',
      }, {
        name: 'LHhhdance',
        y: 1510,
        svcunitname: 'ALL',
        categoryB: 'haulers',
      }, {
        name: 'Operadghmary',
        y: 1442,
        svcunitname: 'ALL',
        categoryB: 'ptcTdSumm',
      }, {
        name: 'Scogdhd',
        y: 1392,
        svcunitname: 'ALL',
        categoryB: 'scofghrd',
      }, {
        name: 'Intmfghard',
        y: 1392,
        svcunitname: 'ALL',
        categoryB: 'sgfhd',
      }, {
        name: 'Edfhghd',
        y: 1392,
        svcunitname: 'ALL',
        categoryB: 'scorefh',
      }, {
        name: 'uipkk',
        y: 1392,
        svcunitname: 'ALL',
        categoryB: 'scor',
      }, {
        name: 'chaard',
        y: 1392,
        svcunitname: 'ALL',
        categoryB: 'scorrd',
      }, {
        name: 'LNFliance',
        y: 1179,
        svcunitname: 'ALL',
        categoryB: 'lnflianceB',
      }, {
        name: 'TSrends',
        y: 1119,
        svcunitname: 'ALL',
        categoryB: 'tsrending',
      }, {
        name: 'StoSub',
        y: 987,
        svcunitname: 'ALL',
        categoryB: 'stoSub',
      }, {
        name: 'liance',
        y: 954,
        svcunitname: 'ALL',
        categoryB: 'liance',
      }, {
        name: 'WKRown',
        y: 942,
        svcunitname: 'ALL',
        categoryB: 'rskly',
      }, {
        name: 'AEers',
        y: 940,
        svcunitname: 'ALL',
        categoryB: 'aePie',
      }, {
        name: 'DPUtt',
        y: 838,
        svcunitname: 'ALL',
        categoryB: 'dputt',
      }, {
        name: 'Loas',
        y: 802,
        svcunitname: 'ALL',
        categoryB: 'loas',
      }, {
        name: 'TSts',
        y: 749,
        svcunitname: 'ALL',
        categoryB: 'tUns',
      }, {
        name: 'Sthersk',
        y: 737,
        svcunitname: 'ALL',
        categoryB: 'sterDtl',
      }, {
        name: 'WKTr',
        y: 728,
        svcunitname: 'ALL',
        categoryB: 'eTo',
      }, {
        name: 'ris',
        y: 678,
        svcunitname: 'ALL',
        categoryB: 'ris',
      }, {
        name: 'LHPnce',
        y: 661,
        svcunitname: 'ALL',
        categoryB: 'lhShtail',
      }, {
        name: 'Stort',
        y: 657,
        svcunitname: 'ALL',
        categoryB: 'stopad',
      }, {
        name: 'WKSWUl',
        y: 649,
        svcunitname: 'ALL',
        categoryB: 'swuly',
      }, {
        name: 'Pte',
        y: 634,
        svcunitname: 'ALL',
        categoryB: 'pte',
      }, {
        name: 'Lst',
        y: 606,
        svcunitname: 'ALL',
        categoryB: 'lst',
      }, {
        name: 'AEst',
        y: 579,
        svcunitname: 'ALL',
        categoryB: 'aeist',
      }, {
        name: 'WDER ',
        y: 579,
        svcunitname: 'ALL',
        categoryB: 'emsLder',
      }, {
        name: 'Ater',
        y: 560,
        svcunitname: 'ALL',
        categoryB: 'aver',
      }, {
        name: 'Stth',
        y: 560,
        svcunitname: 'ALL',
        categoryB: 'stonth',
      }, {
        name: 'LNail',
        y: 543,
        svcunitname: 'ALL',
        categoryB: 'lnail',
      }, {
        name: 'TSDiew',
        y: 542,
        svcunitname: 'ALL',
        categoryB: 'tsdTn',
      }, {
        name: 'C',
        y: 535,
        svcunitname: 'ALL',
        categoryB: 'cRate',
      }, {
        name: 'Stop',
        y: 535,
        svcunitname: 'ALL',
        categoryB: 'cRa',
      }, {
        name: 'LHP',
        y: 532,
        svcunitname: 'ALL',
        categoryB: 'lowH',
      }, ];

这是一只虫子。这很可能与已经报道的一个有关-见。您可以按照Barbara Laird的答案进行操作,或者将cropThreshold设置为大于分数的值

 series: [{
          name: 'Category',
          colorByPoint: true,
          cropThreshold: 200,

示例:

对于大型数据集,这不会对性能造成重大影响吗?女朋友,你按时完成了目标。问题解决了。(我发誓我可能会把你从苹果公司偷走来和我一起工作:)我想你不会碰巧喜欢粗鲁的铁路工人,他们到处乱跑,不太时髦吧?一如既往地感谢你的帮助:别动,你让我开心!很乐意帮忙
 series: [{
          name: 'Category',
          colorByPoint: true,
          cropThreshold: 200,