質問
HighChart(jQueryチャートライブラリ)を使用しています。私はツールチップで軸を示しています。これで、それぞれのバーの上にY軸値を表示する必要があります。どうやってやるの
私の例グラフ
質問: HighChartのそれぞれのバーの上にYaxis値を表示します。
解決 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-rotated-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