Javascript 高位图表中条形之间的奇数间距
我有这个堆叠的条形图，它似乎使这些非均匀的差距每一个条数，它消失时，条数是低的，但它变得最坏时，数字是大的，它也不是固定在一个位置，但它会根据屏幕大小的变化，你可以看到代码 或者在我的网站上Javascript 高位图表中条形之间的奇数间距,javascript,highcharts,Javascript,Highcharts,我有这个堆叠的条形图，它似乎使这些非均匀的差距每一个条数，它消失时，条数是低的，但它变得最坏时，数字是大的，它也不是固定在一个位置，但它会根据屏幕大小的变化，你可以看到代码 或者在我的网站上 var系列颜色=[ "fb6e4c",， #5f7aec"， "fde46f",， "6cb8f4",， “#8ee4a0”， “#e373f7” ]; var chart=新的Highcharts.chart（'mychart'{ 图表：{ 键入：“列”， 间距：35， //plotBackgr
var系列颜色=[
"fb6e4c",，
#5f7aec"，
"fde46f",，
"6cb8f4",，
“#8ee4a0”，
“#e373f7”
];
var chart=新的Highcharts.chart（'mychart'{
图表：{
键入：“列”，
间距：35，
//plotBackgroundColor:“#bcbc”，
marginBottom:60，
},
标题：假，
xAxis：{
类别包括：以下类别：以下类别：以下类别：：[“11605555555才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会才会“2020年”、“2020年”、“2020年”、“2020年”、“2020年”、“2020年”、“2020年”、“2020年”、“2020年”、“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",],
标签：{
是的，
格式化程序：函数（）{return''+this.value+''；}，
enabled:true，//默认值为true，
步骤：15，
//轮换：-90，
//风格：{
//颜色：“#eb583b”，
//字体：“'DroidArabicNaskhRegular'，'Lato'，'Helvetica Neue'”，
//fontSize:'20px'，
//是的，
// },
},
//项目样式：{
//颜色：“#6c757d”，
//fontSize:'15px'，
//fontFamily:“‘DroidArabicNaskhRegular’、‘Lato’、‘Helvetica Neue’”，
////方向：“rtl”
// },
},
亚克斯：{
标签：{
格式：“{value:，.0f}”
},
相反：是的，
分:0,，
标题：假，
堆叠标签：{
启用：false，
风格：{
fontFamily:“‘DroidArabicNaskhRegular’、‘Lato’、‘Helvetica Neue’”，
fontWeight:'粗体'，
颜色：（//主题
Highcharts.defaultOptions.title.style&&
Highcharts.defaultOptions.title.style.color
)| |“灰色”
}
}
},
图例：{
对齐：'居中'，
x:0,，
垂直排列：“顶部”，
y:-10，
浮动：假，
backgroundColor:Highcharts.defaultOptions.legend.backgroundColor | | |“白色”，
是的，
边框颜色：“#CCC”，
边框宽度：0，
影子：错，
项目样式：{
颜色：“#6c757d”，
字体大小：'
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, ",");}
plotOptions: {
column: {
...,
crisp: false
},
...
}