У меня есть эта столбчатая диаграмма с накоплением, и кажется, что эти неравномерные промежутки появляются на каждом количестве столбцов, он исчезает, когда количество столбцов мало, но становится хуже, когда количество велико, и оно также не фиксируется в одном месте но он меняется в зависимости от размера экрана, вы можете увидеть код здесь или на моем сайте там
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, ",");}