我想将条形图右侧显示的值(34.4,21.8,20.1等)对齐到图表的远端,如下图所示:
原件:
期望的权利对齐: Desired http://i47.tinypic.com/1zoxdu8.jpg
我正在使用HighCharts,我的代码是:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 50, 100, 80],
inverted: true
},
title: {
text: 'World\'s largest cities per 2008'
},
xAxis: {
categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul'
],
labels: {
rotation: 0,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
' millions';
}
},
series: [{
name: 'Population',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: 0,
color: 'Black',
align: 'right',
//x: parseFloat(this.y) + 10,
x: 40,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
答案 0 :(得分:0)
我认为使用它的API还不可能做到这一点
但是以下代码可以为您完成:
// #container
是您的图表容器ID
$('#container .highcharts-data-labels g').attr('transform', function(i, value) {
return value.replace(/\d+/, chart.containerWidth - 150);
});
如果您检查图表内容,您会看到每个标签都有transform
attr,这用于将标签放入图表中,因此上面的代码会替换第一个参数(x
)这是attr。
答案 1 :(得分:0)
我必须为我的一个项目做这件事。这是小提琴。 http://jsfiddle.net/kashyap02004/veJ38/
基本上你必须像这样渲染值:
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 645, 203, 20]
}]
},
//这就是所有魔法发生的地方
function (chart) {
for (var i = 0; i < chart.series[0].data.length; i++) {
var point = chart.series[0].data[i];
var text = chart.renderer.text(
point.y, // you can display any property on that object.
//tweek these values to align it
chart.plotLeft + chart.plotSizeY - 30,
chart.plotHeight - point.barX + 45).attr({
zIndex: 5,
fill: '#666679',
}).add();
}
});