• 1000 * jsfiddle
Я снова публикую код здесь, так как Stackoverflow просит меня сделать это, он также попросил меня добавить больше текста, поскольку он думает, что мой вопрос в основном код, поэтому я должен добавить больше слов вам Возможно, вам не обязательно понадобится или будет полезно ответить на этот вопрос, вы можете go перейти на веб-сайт и увидеть там код в реальном времени или щелкнуть ссылку на JSfiddle, они оба являются воспроизведением рабочего примера с проблемой, о которой я упоминал ранее, я думаю, мне нужно перестать добавлять слова сейчас.
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, ",");
}
есть идеи, почему?
Спасибо