Javascript Highcharts在一列中显示值
我想将条形图右侧显示的值（34.4、21.8、20.1等）与图表的远端对齐，如下图所示： 原件： 所需的值右对齐： 我使用的是HighCharts，我的代码是：Javascript Highcharts在一列中显示值,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我想将条形图右侧显示的值（34.4、21.8、20.1等）与图表的远端对齐，如下图所示： 原件： 所需的值右对齐： 我使用的是HighCharts，我的代码是： $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container',
$(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'
}
}
}]
});
});
});
$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
键入：“列”，
保证金：[50,50,100,80]，
倒过来：是的
},
标题：{
文字：“2008年世界最大城市”
},
xAxis：{
类别：[
"东京",，
“雅加达”，
“纽约”，
"汉城",，
“马尼拉”，
“孟买”，
“圣保罗”，
“墨西哥城”，
"德里",，
"大阪",，
“开罗”，
“加尔各答”，
“洛杉矶”，
"上海",，
“莫斯科”，
"北京",，
“布宜诺斯艾利斯”，
"广州",，
"深圳",，
“伊斯坦布尔”
],
标签：{
轮换：0，
对齐：“右”，
风格：{
fontSize:'13px'，
fontFamily:“Verdana，无衬线”
}
}
},
亚克斯：{
分:0,，
标题：{
正文：“人口（百万）”
}
},
图例：{
已启用：false
},
工具提示：{
格式化程序：函数（）{
返回“+this.x+”
+
“2008年人口：”+Highcharts.numberFormat（this.y，1）+
“百万”；
}
},
系列：[{
姓名：'人口'，
数据：[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],
数据标签：{
启用：对，
轮换：0，
颜色：'黑色'，
对齐：“右”，
//x:parseFloat（this.y）+10，
x:40，
y:10，
格式化程序：函数（）{
把这个还给我；
},
风格：{
fontSize:'13px'，
fontFamily:“Verdana，无衬线”
}
}
}]
});
});
});
我有一个我认为使用它的API还不可能做到这一点。
但是下面的代码可以为您做到这一点：
//
#container$('#container .highcharts-data-labels g').attr('transform', function(i, value) {
return value.replace(/\d+/, chart.containerWidth - 150);
});
transformx我认为使用它的API还不可能做到这一点。
但是下面的代码可以为您做到这一点：
//
#container$('#container .highcharts-data-labels g').attr('transform', function(i, value) {
return value.replace(/\d+/, chart.containerWidth - 150);
});
transformx我不得不为我的一个项目做这个。这是小提琴 基本上，您必须按如下方式渲染值：
$('#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();
}
});
功能（图表）{
对于（var i=0；i$('#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();
}
});
功能（图表）{
对于（var i=0；i