退出功能会在退出缩放时中断xAxis标签并创建图表间隙
我有一个繁忙的柱形图，启用了缩放功能。当我放大一切都是桃子。当我单击缩小按钮时，视图会中断。我的标签显示了他们的ID，图表显示了间隙和其他异常情况。这是一些屏幕截图。
这里有很多要点...当我放大时。我的视图按预期工作，我在X上的标签很好。当我重置缩放时，会发生这种情况：
请注意视图中没有条形的剪辑，这看起来像我选择的组不会回到视图中。然后系列的其余部分正常生成，但所有标签都显示其结构ID（我相信）而不是他们的名字。）
现在我有一个限制视图的工作只有50列，为什么50？甘拜下风！但它的功能与正常情况一样，一旦我进入51就会崩溃。
另外，我在Highcharts Highstock JS v5.0.6 （我正在使用此特定图表的highstocks.js依赖关系，但它失败了。）
Here is a Fiddle with the failing code example.
如果添加了一个jsFiddle（荒谬但无论如何），这里有一些令人作呕的代码来满足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',
},]
}],
});
});
2 个答案:
答案 0 :(得分：1)
这对我来说绝对是一个错误。您可以使用xAxis上的显式类别来解决此问题。
http://jsfiddle.net/xe0furkn/1/
var categories = [];
for (var item in data) {
categories.push(data[item].name);
};
$('#container').highcharts({
chart: {
type: 'column',
height: 600,
zoomType: 'x'
},
credits: {
enabled: false
},
xAxis: {
type: 'category',
categories: categories
},
yAxis: {},
legend: {
enabled: false
},
series: [{
name: 'Category',
colorByPoint: true,
data: data
}],
});
假设数据定义为你拥有它
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',
}, ];
答案 1 :(得分：0)
这是一个错误。很可能与已经报告过的人有关 - 见github。您可以按照Barbara Laird的答案或将cropThreshold设置为大于点数。
series: [{
name: 'Category',
colorByPoint: true,
cropThreshold: 200,
相关问题
- Silverlight ToolKit Chart：隐藏xaxis标签
- HighCharts - 图表底部和Xaxis标签之间需要更多空间
- Asp.net图表雷达线 - 没有XAxis标签显示
- 使用phantomjs和JSON在服务器上呈现图表时格式化XAxis标签
- PrimeFaces区域图表重叠xaxis标签
- 在MPandroid图表中设置Xaxis的标签（条形图）
- jquery flot xaxis how to make labels go under the chart?
- Highcharts折线图 - 突出显示点悬停时的xAxis标签
- 退出功能会在退出缩放时中断xAxis标签并创建图表间隙
- Flot折线图时间xaxis系列固定标签
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？