У меня есть проблема с настройкой графика на этой странице: https://besthostadvisor.com/ - вот скриншот графика: http://prntscr.com/oah6nf
Вот код JS графика:
// Graph
if( $('#chart').length ) {
if( $(window).width() > 1023 ) {
var pointWidth = 56
var tickPixelInterval = 50
}
if( $(window).width() > 767 && $(window).width() < 1024 ) {
var pointWidth = 41
var tickPixelInterval = 50
}
if( $(window).width() > 479 && $(window).width() < 768 ) {
var pointWidth = 31
var tickPixelInterval = 45
}
if( $(window).width() < 480 ) {
var pointWidth = 18
var tickPixelInterval = 30
}
Highcharts.chart('chart', {
chart: {
type: 'column',
spacing:[10, 0, 10, 5]
},
colors: ['#F5762B'],
title: {
text: ''
},
xAxis: {
type: 'category',
lineColor: '#E7E7E7',
tickColor: '#fff',
labels: {
rotation: -45,
style: {
color: '#7F7F7F',
fontFamily: 'ProximaNova'
}
}
},
yAxis: {
min: 0,
max: 2300000,
tickPixelInterval: tickPixelInterval,
lineColor: '#E7E7E7',
title: {
text: ''
},
labels: {
format: '{value}',
formatter: function(value) {
var value = this.value
with (Math) {
var base = floor(log(abs(value))/log(1000));
var suffix = 'kmb'[base-1];
return suffix ? String(value/pow(1000,base)).substring(0,4)+suffix : ''+value;
}
},
style: {
color: '#7F7F7F',
fontFamily: 'ProximaNova'
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointWidth: pointWidth
}
},
tooltip: {
useHTML: true,
headerFormat: '<div class="name">{point.key}</div>',
pointFormat: '<div class="val">{point.y}</div>',
backgroundColor: '#fff',
borderColor: '#ccc',
borderRadius: 0,
padding: 15,
shadow: true,
style:{
color: '#434343',
lineHeight: '18px',
fontFamily: 'ProximaNova'
}
},
series: [{
name: 'Hosts',
data: [
['A2 Hosting', 185343],
['BlueHost', 2300950],
['Digital Ocean', 613786],
['DreamHost', 1056670],
['GreenGeeks', 99218],
['HostGator', 2181645],
['Hostinger', 328054],
['InMotion', 497576],
['iPage', 394252],
['SiteGround', 748595]
]
}]
})
}
Скажите, пожалуйста, как я мог бы настроить этот график, чтобы отображать два столбца для каждого поставщика в диаграммах для текущей даты и предыдущей?
Будет выглядеть так: http://prntscr.com/oahb8o
Основная цель - показать пользователям, как он растет.
Спасибо