Javascript 当退出缩放时,缩放功能会打断xAxis标签并创建图表间隙
我有一个启用缩放功能的繁忙柱状图。当我放大时,一切都很美好。单击“缩小”按钮时,视图中断。我的标签显示了它们的ID,图中显示了间隙和其他异常。下面是一些屏幕截图 当我放大时,这里有很多点。我的视图按预期工作,我在X上的标签很好。但是,当我重置缩放时,会发生以下情况: 请注意视图中没有条形图的剪辑,这看起来像我选择的组没有返回到视图中。然后,该系列的其余部分正常生成,但所有标签都显示了它们的结构ID(我相信),而不是它们的名称) 现在我有一个解决办法,限制视图只有50列,为什么是50列?太棒了!但它的功能和平常一样,我一到51,它就崩溃了 另外,我使用的是HighchartsHighstock JS v5.0.6(我使用highstocks.JS依赖项来处理这个特定的图表,但它同样失败) 如果添加了JSFIDLE,这里有大量代码可以满足stackoverflow的“必须附带代码”子句的要求(虽然很可笑,但无论如何) 呕吐代码在3,2,1Javascript 当退出缩放时,缩放功能会打断xAxis标签并创建图表间隙,javascript,highcharts,Javascript,Highcharts,我有一个启用缩放功能的繁忙柱状图。当我放大时,一切都很美好。单击“缩小”按钮时,视图中断。我的标签显示了它们的ID,图中显示了间隙和其他异常。下面是一些屏幕截图 当我放大时,这里有很多点。我的视图按预期工作,我在X上的标签很好。但是,当我重置缩放时,会发生以下情况: 请注意视图中没有条形图的剪辑,这看起来像我选择的组没有返回到视图中。然后,该系列的其余部分正常生成,但所有标签都显示了它们的结构ID(我相信),而不是它们的名称) 现在我有一个解决办法,限制视图只有50列,为什么是50列?太棒了
$(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,