jquery Highcharts - 将 标题 置于 图表 下方

mwkjh3gx  于 2022-11-22  发布在  jQuery
关注(0)|答案(4)|浏览(190)

如果将标题设置为verticalAlign,是否可以将标题直接放置在图表下方:“底部”不是直接放在图表下面,而是在底部,这不是我想要的。

title: {
    enabled: true,
    text: 'Foo',
    verticalAlign: 'bottom',
    align: 'left'
},
hi3rlvi2

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) }
...
});
5ssjco0h

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 * * 提出 的 解决 方法 :

chart:{
        marginBottom : '50' // this to make room for title under axis
      }

格式
这 是 一 个 jsfiddle

gr8qqesn

gr8qqesn3#

如果 您 不 想 按照 上面 * *@Andre * * 的 建议 设置 marginBottom , 也 可以 使用 series 规范 中 的 size 属性 。

series: [
  {
    name: 'Categories',
    data: data,
    size: '60%'
  },
]

中 的 每 一 个
这 会 使 图表 的 大小 变 小 , 以便 底部 对齐 的 标题 不会 与 图表 重叠 。

332nm8kg

332nm8kg4#

您 需要 在 标题 对象 中 添加 属性 " floating " 。
根据 文档 , verticalAlign 属性 为 :标题 的 垂直 对齐 方式 。 可以 是 " top " 、 " middle " 和 " bottom " 之 一 。 当 给定 值 时 , 标题 的 行为 就 像 floating 为 true 一样 。

{
        title: {
            text: "Your title text",
            floating: true,
            verticalAlign: "bottom"
        }
 }

中 的 每 一 个
文件 链接 :https://api.highcharts.com/highcharts/title 的 最 大 值
图表 下 职位 名称 的 JSFiddle :JSFiddle 格式

相关问题