如何将文字添加到图例下的图例底部中心和图表底部中心？ [英] How do you add text to the bottom center of legend and bottom center of chart under legend?
本文介绍了如何将文字添加到图例下的图例底部中心和图表底部中心？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个自定义的HighCharts，总数在图例中。我需要添加一行自定义文本，以图例中的总数为中心。此外，我还需要在图表底部添加文字中心。
请参阅小提琴：
http://jsfiddle.net/no1uknow/cvsTB/
$ b
我做了想想这些，但不知道如何在传说中获得文本。
http://jsfiddle.net/no1uknow/cvsTB/1/
$（function（）{
var chart;
$（document）.ready（function（）{
var container_chartFreqAtaTailNum = new Highcharts.Chart（{
chart：{
renderTo：'container_chartFreqAtaTailNum'，
type：'bar' ，
高度：795
}，
标题：{
文本：'按频率尾数'
}，
副标题：
text：'Fact ATA（25）'
}，
xAxis：{
categories：['235'，'245'，'402'，'411'，' 432'，'442'，'493'，'703'，'714'，'720'，'730'，'745'，'756'，'767'，'772'，'792']，
title：{
text：'Tail Number'
}，
labels：{
style：{
width：'12000px'
}
}，
yAxis：{
min：0，
title：{
text：'Count'，
align：'high'
}，
标签：{
overflow：'justify'
}
}，
工具提示：{
formatter：function（）{
return''+ this.series.name +'：'+ this.y +'Count';
plotOptions {
bar：{
dataLabels：{
enabled：true
}
}，
系列：{
pointWidth：10，
groupPadding：.05，
shadow：true
}
}，
legend：{
layout：'horizontal'，
align：'center'，
verticalAlign：'bottom'，
floating：false，
borderWidth：1，
backgroundColor ：'#FFFFFF'，
shadow：true，
labelFormatter：function（）{
返回'< div class ='+ this.name +'-arrow>< / div>< span style =font-family：\'Advent Pro \'，sans-serif; font-size：12px>'+ this.name +'< / span>< br />< span style =font-size：10px;颜色：#ababaa>总计：'+ this.options.total +'< / span>';
}
}，
学分：{
启用：false
}，
导出：{
已启用：true
}，
系列：[{
name：'Heavy'，
total： '5421'，
数据：[117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317]
}，{
名称：'中间'，
合计：'4888'，
数据：[299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277]
}，{
名称：'Line'，
总数：'659'，
数据：[29,38,50,47,33,27,22,67,57 ，44,36,53,41,37,35,43]
}，{
名称： 'Lite'，
total：'2172'，
data：[101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116]
}]
}）;
}）;
}）;
解决方案
spacingBottom 是您需要添加的内容，同时您还需要注意偏移量：
chart：{
events：{
load：function（）{
var label = this.renderer.label（如何移动此中心并在）
.css（{
width：'450px'，
color：'＃222'，
fontSize：'16px'
}）
.attr（{
'stroke'：'silver'，
'stroke-width'：2，
'r'：5，
'padding'：10
}）
.add（）;
label.align（Highcharts.extend（label.getBBox（），{
align：'center'，
x：0，// offset
verticalAlign：'底部'，
y：50 //设置右偏移量
}），null，'spacingBox'）;
$ b}
}，
renderTo：'container_chartFreqAtaTailNum'，
类型：'bar'，
高度：895，
spacingBottom：100 //图表底部边缘与内容之间的空间（绘图区域，轴标题和标签，标题，字幕或图例位于顶部位置）。
}
这是小提琴： http://jsfiddle.net/uMBHf/1/
I have a custom HighCharts that have totals in the legend. I need to add one line of custom text centered under the totals "in the legend". Also I need to add text center at the bottom of the chart "under the legend".
See fiddle: http://jsfiddle.net/no1uknow/cvsTB/
[EDIT] I did figure this much out but don't know how to get text centered under legend. http://jsfiddle.net/no1uknow/cvsTB/1/
$(function () {
var chart;
$(document).ready(function() {
var container_chartFreqAtaTailNum = new Highcharts.Chart({
chart: {
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 795
},
title: {
text: 'Frequency by Tail Number'
},
subtitle: {
text: 'Fact ATA (25)'
},
xAxis: {
categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'],
title: {
text: 'Tail Number'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '5421',
data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317]
},{
name: 'Intermediate',
total: '4888',
data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277]
},{
name: 'Line',
total: '659',
data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43]
},{
name: 'Lite',
total: '2172',
data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116]
}]
});
});
});
解决方案
spacingBottom is what you need to add, and also you need to take care of the offset:
chart: {
events: {
load: function () {
var label = this.renderer.label("How do I move this center and under the legend.")
.css({
width: '450px',
color: '#222',
fontSize: '16px'
})
.attr({
'stroke': 'silver',
'stroke-width': 2,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 50 // set the right offset
}), null, 'spacingBox');
}
},
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 895,
spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).
}
Here is the fiddle: http://jsfiddle.net/uMBHf/1/
这篇关于如何将文字添加到图例下的图例底部中心和图表底部中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
