如果将标题设置为verticalAlign,是否可以将标题直接放置在图表下方:“底部”不是直接放在图表下面,而是在底部,这不是我想要的。
title: { enabled: true, text: 'Foo', verticalAlign: 'bottom', align: 'left' },
hi3rlvi21#
看看这把小提琴:Fiddle我通过给标题一个固定的y坐标将其移动到所需的位置。
$(function () { $('#container').highcharts({ chart: { plotBorderWidth: 1, marginLeft: 80, marginBottom : 100 // this to make room for title under axis }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, title: { text: 'My custom title', align: 'center', y: 340 // this to move y-coordinate of title to desired location }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] });
如果你不想使用固定的数字来定位你的标题(例如,也许你有大小动态变化的图表),不用担心,你可以给它一个公式或函数,例如:
$('#container').highcharts({ ... title: { y : $('#container').height() * 0.85 } // this will position the title with 85% margin from the top. ... });
或
function myTitlePosition(params){ //return some custom value in here } $('#container').highcharts({ ... title: { y : mytitlePosition(params) } ... });
5ssjco0h2#
下面 介绍 了 如何 在 不 使用 固定 坐标 或 JQuery 的 情况 下 设置 图表 下面 的 标题 。
title: { text: 'My title', align: 'center', verticalAlign: 'bottom', margin: 50, floating: true, style: { // margin: '50px', // does not work for some reasons, see workaround below color: '#707070', fontSize: '12px', fontWeight: 'normal' textTransform: 'none' } }
中 的 每 一 个因为 我 没有 设法 让 margin 属性 处理 标题 本身 , 所以 我 使用 了 上面 * *@AleB * * 提出 的 解决 方法 :
margin
chart:{ marginBottom : '50' // this to make room for title under axis }
格式这 是 一 个 jsfiddle 。
gr8qqesn3#
如果 您 不 想 按照 上面 * *@Andre * * 的 建议 设置 marginBottom , 也 可以 使用 series 规范 中 的 size 属性 。
marginBottom
series
size
series: [ { name: 'Categories', data: data, size: '60%' }, ]
中 的 每 一 个这 会 使 图表 的 大小 变 小 , 以便 底部 对齐 的 标题 不会 与 图表 重叠 。
332nm8kg4#
您 需要 在 标题 对象 中 添加 属性 " floating " 。根据 文档 , verticalAlign 属性 为 :标题 的 垂直 对齐 方式 。 可以 是 " top " 、 " middle " 和 " bottom " 之 一 。 当 给定 值 时 , 标题 的 行为 就 像 floating 为 true 一样 。
verticalAlign
{ title: { text: "Your title text", floating: true, verticalAlign: "bottom" } }
中 的 每 一 个文件 链接 :https://api.highcharts.com/highcharts/title 的 最 大 值图表 下 职位 名称 的 JSFiddle :JSFiddle 格式
4条答案
按热度按时间hi3rlvi21#
看看这把小提琴:Fiddle
我通过给标题一个固定的y坐标将其移动到所需的位置。
如果你不想使用固定的数字来定位你的标题(例如,也许你有大小动态变化的图表),不用担心,你可以给它一个公式或函数,例如:
或
5ssjco0h2#
下面 介绍 了 如何 在 不 使用 固定 坐标 或 JQuery 的 情况 下 设置 图表 下面 的 标题 。
中 的 每 一 个
因为 我 没有 设法 让
margin
属性 处理 标题 本身 , 所以 我 使用 了 上面 * *@AleB * * 提出 的 解决 方法 :格式
这 是 一 个 jsfiddle 。
gr8qqesn3#
如果 您 不 想 按照 上面 * *@Andre * * 的 建议 设置
marginBottom
, 也 可以 使用series
规范 中 的size
属性 。中 的 每 一 个
这 会 使 图表 的 大小 变 小 , 以便 底部 对齐 的 标题 不会 与 图表 重叠 。
332nm8kg4#
您 需要 在 标题 对象 中 添加 属性 " floating " 。
根据 文档 ,
verticalAlign
属性 为 :标题 的 垂直 对齐 方式 。 可以 是 " top " 、 " middle " 和 " bottom " 之 一 。 当 给定 值 时 , 标题 的 行为 就 像 floating 为 true 一样 。中 的 每 一 个
文件 链接 :https://api.highcharts.com/highcharts/title 的 最 大 值
图表 下 职位 名称 的 JSFiddle :JSFiddle 格式