javascript - Highcharts中条形之间的奇数间距
问题描述
我有这个堆积条形图，它似乎在每个条形图上都产生了这些非偶数间隙，当条形图数量较少时它会消失，但当数量很大时它会变得最差，而且它也没有固定在一个位置但它会改变根据屏幕大小，您可以在此处
或在我的网站上查看代码
var seriesColors = [
'#fb6e4c',
'#5f7aec',
'#fde46f',
'#6cb8f4',
'#8ee4a0',
'#e373f7'
];
var chart = new Highcharts.chart('mychart', {
chart: {
type: 'column',
spacingLeft: 35,
// plotBackgroundColor: '#bcbcbc',
marginBottom: 60,
},
title: false,
xAxis: {
categories: [" 1 مارس 2020"," 2 مارس 2020"," 3 مارس 2020"," 4 مارس 2020"," 5 مارس 2020"," 6 مارس 2020"," 7 مارس 2020"," 8 مارس 2020"," 9 مارس 2020"," 10 مارس 2020"," 11 مارس 2020"," 12 مارس 2020"," 13 مارس 2020"," 14 مارس 2020"," 15 مارس 2020"," 16 مارس 2020"," 17 مارس 2020"," 18 مارس 2020"," 19 مارس 2020"," 20 مارس 2020"," 21 مارس 2020"," 22 مارس 2020"," 23 مارس 2020"," 24 مارس 2020"," 25 مارس 2020"," 26 مارس 2020"," 27 مارس 2020"," 28 مارس 2020"," 29 مارس 2020"," 30 مارس 2020"," 31 مارس 2020"," 1 أبريل 2020"," 2 أبريل 2020"," 3 أبريل 2020"," 4 أبريل 2020"," 5 أبريل 2020"," 6 أبريل 2020"," 7 أبريل 2020"," 8 أبريل 2020"," 9 أبريل 2020"," 10 أبريل 2020"," 11 أبريل 2020"," 12 أبريل 2020"," 13 أبريل 2020"," 14 أبريل 2020"," 15 أبريل 2020"," 16 أبريل 2020"," 17 أبريل 2020"," 18 أبريل 2020"," 19 أبريل 2020"," 20 أبريل 2020"," 21 أبريل 2020"," 22 أبريل 2020"," 23 أبريل 2020"," 24 أبريل 2020"," 25 أبريل 2020"," 26 أبريل 2020"," 27 أبريل 2020"," 28 أبريل 2020"," 29 أبريل 2020"," 30 أبريل 2020"," 1 مايو 2020"," 2 مايو 2020"," 3 مايو 2020"," 4 مايو 2020"," 5 مايو 2020"," 6 مايو 2020"," 7 مايو 2020"," 8 مايو 2020"," 9 مايو 2020"," 10 مايو 2020"," 11 مايو 2020"," 12 مايو 2020"," 13 مايو 2020"," 14 مايو 2020"," 15 مايو 2020"," 16 مايو 2020"," 17 مايو 2020"," 18 مايو 2020"," 19 مايو 2020"," 20 مايو 2020"," 21 مايو 2020"," 22 مايو 2020"," 23 مايو 2020"," 24 مايو 2020"," 25 مايو 2020"," 26 مايو 2020"," 27 مايو 2020"," 28 مايو 2020"," 29 مايو 2020"," 30 مايو 2020"," 31 مايو 2020"," 1 يونيو 2020"," 2 يونيو 2020"," 3 يونيو 2020"," 4 يونيو 2020"," 5 يونيو 2020"," 6 يونيو 2020"," 7 يونيو 2020"," 8 يونيو 2020"," 9 يونيو 2020"," 10 يونيو 2020"," 11 يونيو 2020"," 12 يونيو 2020"," 13 يونيو 2020"," 14 يونيو 2020"," 15 يونيو 2020"," 16 يونيو 2020"," 17 يونيو 2020",],
labels:{
useHTML:true,
formatter:function(){return '<span class="xlabel">' + this.value + '</span>';},
enabled:true,//default is true,
step: 15,
// rotation: -90,
// style: {
// color: '#eb583b',
// font: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// fontSize: '20px',
// rtl: true,
// },
},
// itemStyle: {
// color: '#6c757d',
// fontSize: '15px',
// fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// // direction: 'rtl'
// },
},
yAxis: {
labels:{
format:"{value:,.0f}"
},
opposite: true,
min: 0,
title: false,
stackLabels: {
enabled: false,
style: {
fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'center',
x: 0,
verticalAlign: 'top',
y: -10,
floating: false,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
rtl: true,
borderColor: '#CCC',
borderWidth: 0,
shadow: false,
itemStyle: {
color: '#6c757d',
fontSize: '15px',
fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'",
// direction: 'rtl'
},
},
tooltip: {
borderColor:'grey',
shared: true,
useHTML: true,
style: {fontFamily: "'DroidArabicNaskhRegular','Lato','Helvetica Neue'"},
// headerFormat: '<b><span class="tooltiphead">{point.x}</span></b>',
// pointFormat: '<br/>{point.y:,.0f} :{series.name}',
// footerFormat: '</br><span>{point.stackTotal:,.0f} :الإجمالي</span>'
formatter: function() {
var s = '<b><span class="tooltiphead">'+ this.x +'</span></b>';
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name + ': '+ numberWithCommas(point.y) +' <i class="fa fa-circle" aria-hidden="true" style="color:'+ point.color +';"></i>';
sum += point.y;
});
s += '<br/><b>الإجمالي: '+ numberWithCommas(sum)+'</b>'
return s;
},
},
plotOptions: {
column: {
// pointPadding: 0,
// borderWidth: 0,
// groupPadding: 0,
// shadow: false,
maxPointWidth: 50,
stacking: 'normal',
dataLabels: {
enabled: false
},
},
series: {// this i snot working you can delete it is you come back later
pointPlacement:'between',
grouping: false,
// pointWidth:9.5,
groupPadding: 0,
pointPadding: 0.12,
borderWidth: 0,
animation: false,
states: {
hover:{
// color: '#bcbcbc',
},
inactive: {
enabled: true,
opacity: 0.5
}
},
},
},
series: [
{
name: 'أمريكا الشمالية',
data: [1600,1376,1866,1234,1281,2043,1747,1221,875,1195,1760,1567,1581,1916,1940,1630,2020,1999,2368,2364,2731,3186,3098,3722,5381,5490,7058,7352,7346,7001,8789,8545,9287,8646,8945,9324,10646,9481,9573,10316,11347,11893,11671,11828,11131,11452,12746,12805,11946,13001,12500,14228,11946,13577,13141,12266,11585,11505,11437,12531,13080,13454,12037,12910,14026,14353,16734,14588,16332,16083,17859,16089,18346,17721,18079,20507,18580,20217,20941,21890,22289,23821,25110,23981,24292,22219,20086,23277,25056,29193,27037,29279,26993,30444,32656,33103,32132,34318,34793,35873,31253,33154,37926,37140,39329,38987,39512,37157,37330,],
color: seriesColors[0]
}, {
name: 'أوروبا',
data: [737,527,629,979,1401,1775,2137,2544,2782,3405,5059,7410,7433,8189,8383,10754,11123,13635,18360,20475,21446,19083,25434,23619,29674,34985,35590,36517,29442,30888,35147,36524,35560,37105,33515,29825,27118,29006,34532,33346,38600,30544,52732,25738,26085,31304,43302,32784,23983,35559,24326,26815,26674,29006,25403,26027,23139,23518,23099,21547,23762,23687,24624,22495,21623,23081,28696,26725,25694,22499,21522,24137,21931,19808,21099,21380,18715,18252,16699,18441,15417,17602,19788,17827,15741,14566,18225,15184,20382,17077,17337,15604,14113,14735,20582,15995,16873,16805,15669,14885,14468,14928,14351,15486,16241,15477,15050,13612,15122,],
color: seriesColors[1]
},{
name: 'آسيا',
data: [1,4,3,10,3,19,0,40,8,13,15,28,35,78,61,89,84,122,182,205,221,288,401,467,540,577,583,391,561,470,620,633,701,906,698,733,706,666,804,830,691,725,867,797,973,954,1187,1427,1320,1227,1173,1097,1417,1452,1735,1262,1555,1335,1686,2017,2092,1752,2203,1646,2695,2091,2547,2607,3805,2861,2767,3033,3207,2988,3029,2929,3432,3018,3699,3358,3761,4798,4161,3875,4131,4106,3590,5291,4749,5957,6225,5195,5943,4931,5147,7198,7154,6659,6122,6882,6882,6530,6489,7255,8255,8105,8838,9636,7367,],
color: seriesColors[2]
},{
name: 'أمريكا الجنوبية',
data: [12,27,23,37,74,63,143,134,88,377,368,517,525,598,887,1356,1902,1594,6248,5839,6902,8214,11394,10922,12725,19211,19209,21287,20332,22705,27783,26943,32659,33490,34314,31284,31028,32825,33632,37139,35997,32044,30553,27526,29065,31232,34804,35423,35247,28798,29093,29993,32364,32318,39665,35776,30714,25379,27386,30855,33181,38110,33058,29999,25865,27126,28912,32001,31014,29716,23475,21875,25245,24903,31687,29668,29276,22776,26042,25427,27287,30510,29148,27443,26055,23857,24691,24056,28123,29953,29593,25651,25744,26684,25838,27771,31203,28815,29453,22709,24039,24075,26152,30719,33289,33031,24878,27213,31420,],
color: seriesColors[3]
},{
name: 'إفريقيا',
data: [6,0,3,5,6,12,11,22,7,22,33,84,89,63,67,237,283,243,474,621,717,1136,814,854,828,1113,1183,1281,1029,1003,2196,2385,2300,2027,2333,1913,2021,2866,5084,4112,5372,2828,2900,4074,3066,5195,4351,5302,5109,4515,4206,4777,5353,7427,17398,10052,6881,6942,10395,10612,12491,11626,10248,12072,12093,12953,16469,15294,16975,14763,12064,10704,15526,20069,21222,25685,21820,15279,20928,26634,30742,29310,30521,26723,26479,23060,28239,34345,38883,39636,48036,32190,26093,36557,46168,43126,44566,39691,33093,27771,29710,42593,48087,45761,42397,32323,33546,36850,51142,],
color: seriesColors[4]
}, {
name: 'أوقيانوسيا',
data: [2,3,9,15,3,7,4,13,15,16,21,34,41,51,49,80,79,124,127,127,299,532,138,425,375,529,419,580,407,458,257,365,347,287,308,228,181,158,169,127,152,117,32,58,81,45,43,68,59,51,24,27,15,15,20,26,20,10,26,11,17,19,23,25,25,32,20,20,7,23,12,22,10,11,31,16,10,10,14,8,9,15,4,15,5,12,16,11,16,19,8,10,20,8,11,7,5,8,6,2,5,3,9,9,5,12,18,15,14,],
color: seriesColors[5]
}]
},
function(chart){// this function is not working as intended yet
$(chart.series).each(function(i, serie){
serie.legendItem.on('mouseover', function(){
console.log('mouse in');
}).on('mouseout', function(){
console.log('mouse out');
})
});
} );function numberWithCommas(x) { return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");}
解决方案
这是 Highcharts 将所有列的位置四舍五入到全像素的结果，以便它们在监视器上呈现清晰。如果 x 位置不圆角，则边缘会变得不清晰。
有关更多信息，请参阅此问题：https ://github.com/highcharts/highcharts/issues/2690
作为解决方案禁用crisp选项：
plotOptions: {
column: {
...,
crisp: false
},
...
}
现场演示： https ://jsfiddle.net/BlackLabel/brheq08z/
API 参考： https ://api.highcharts.com/highcharts/series.column.crisp
推荐阅读
- windows - 无法通过 Jenkins 执行 bat 文件
- python-3.x - 如何使用 ffmpeg 将音频切割成重叠的片段？
- java - 将 maven pom.xml 从 java 8 升级到 13。如何在安装了 java 8 和 13 的机器上运行升级的 maven 项目
- javascript - 单击按钮后，消息出现在同一个 div 中
- solr - Windows 10 上的 solr 入门 - 我的第一个本地（非云）集合/核心
- java - 如何将整数传递给参数类型是整数数组而不是整数的实例
- java - 为扩展为级别的方法授予不同的权限
- javascript - 如何切换主题以响应动态导入
- python - 如何在 Python 中将前景文本与嘈杂的背景分开？
- android - 使用 Jenkins 构建 Android 项目时出现问题（未找到任务）