Как построить подобный график?
Так чтобы столбцы были помечены, и чтобы "значение 1" и "значение 2" не дублировались... У меня почему-то на графике по два "значение 1" и "значение 2" :
Highcharts.chart('container', {
chart: {
type: 'column',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, '#1b2a47'],
[1, '#1b2a47']
]
},
},
title: {
text: "Новые заявки",
style: {
color: '#fff',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
text: 'Source: WorldClimate.com',
style: {
color: '#fff',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'white'
},
itemHoverStyle: {
color: 'gray'
}
},
color: {
linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
stops: [
[0, '#003399'],
[1, '#3366AA']
]
},
xAxis: {
gridLineWidth: 1,
lineColor: '#ffffff',
tickColor: '#ffffff',
labels: {
style: {
color: '#ffb606',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
},
categories: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь',]
},
yAxis: {
lineColor: '#ffffff',
tickColor: '#ffffff',
labels: {
style: {
color: '#ffb606',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
text: 'Количество заявок',
style: {
color: '#8bc34a',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
},
stackLabels: {
enabled: true,
align: 'center',
formatter: function () {
console.log(this.points)
return 'Тут должно быть - в первом столбике "myData1" а во втором "myData2"' +'<br/>Всего: ' + this.total;
//Make your changes here to reflect your output. This is just a sample code
},
style: {
fontWeight: 'normal',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || '#ffb606',
}
},
allowDecimals: false,
min: 0,
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
}
}
},
series: [{
"name": "Значение 1",
"data": [
{"y": 1,
"myData": "myData1",
"myOtherData": "myOtherData2"
},
{
"y": 2,
"myData": "myData1",
"myOtherData": "myOtherData2"
}
],
"stack": "1"
}, {
"name": "Значение 2",
"data": [
{
"y": 3,
"myData": "myData2",
"myOtherData": "myOtherData1"
},
{
"y": 4,
"myData": "myData2",
"myOtherData": "myOtherData2"
}
],
"stack": "2"
}, {
"name": "Значение 1",
"data": [
{
"y": 5,
"myData": "myData1",
"myOtherData": "myOtherData1"
},
{
"y": 6,
"myData": "myData1",
"myOtherData": "myOtherData1"
}
],
"stack": "1"
}, {
"name": "Значение 2",
"data": [
{
"y": 7,
"myData": "myData2",
"myOtherData": "myOtherData2"
},
{
"y": 8,
"myData": "myData2",
"myOtherData": "myOtherData2"
}
],
"stack": "2"
}]
});