Как отформатировать высокие диаграммы?
-
09-10-2019 - |
Вопрос
Я использую HighChart (библиотека диаграммы jQuery). Я указываю на ось с подсказкой. Теперь мне нужно отобразить значение оси Y поверх соответствующего бара. Как я могу это сделать
Мой пример графика
Вопрос: Чтобы отобразить значения YAXIS на верхней части соответствующей панели в HighChart.
Решение 3
Мое окончательное решение для моего ожидаемого графика
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'faq_view_graph',
defaultSeriesType: 'column'
},
title: {
text: 'Category View'
},
xAxis: {
categories: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6', 'Category7', 'Category8', 'Category9', 'Category10'],
title:{
text: 'Views'
}
},
yAxis: {
min: 0,
title: {
text: 'Category'
}
},
tooltip: {
enabled: true,
formatter: function() {
return ''+this.series.name +': '+ this.y;
}
},
point: {
events: {
click: function() {
alert('check');
}
}
},
///////////////////////////////////////////////////////////////////////////////
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('Category: '+ this.x +', value: '+ this.y);
}
}
}
}
},
///////////////////////////////////////////////////////////////////////////////
series: [{
name: 'Number of visits',
data: [5, 3, 4, 10, 2, 19, 56, 23, 21, 70],
//Codes to display value on top of each bar
dataLabels: {
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
}]
});
//////////////////////////////Graph/////////////////////////////////////////////
});
Другие советы
HightCharts имеет демонстрацию желаемого поведения:
http://www.highcharts.com/demo/Column-Roted-labels.
Вот часть кода, которая создает этикетки на барах:
dataLabels: {
enabled: true,
rotation: -90,
color: Highcharts.theme.dataLabelsColor || '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
Настройки, которые вы ищете в прямом эфире series.dataLabels
:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Category View'
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5']
},
yAxis: {
title: {
text: 'Views'
}
},
series: [{
name: 'Number of Visits',
data: [5, 3, 4, 7, 2],
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}]
});
Не связан с StackOverflow