代码之家  ›  专栏  ›  技术社区  ›  Dhana

海图-可以在标题和副标题之间画线

  •  2
  • Dhana  · 技术社区  · 8 年前

    在HighChart中,如何在标题和副标题之间显示一条绿线?

    JSFiddle

    title: {
        useHTML: true,
        text: 'Header Text in Line1 </br> Line&nbsp;2 Text',
        style: {
            "text-align": "center"
        }
    },    
    
    subtitle: {
        // useHTML: true,
        text: 'SubTitle',
        style: {
            "color": "red",
        }
    }
    

    Image of what I want

    3 回复  |  直到 7 年前
        1
  •  3
  •   samuellawrentz    8 年前

    你可以做标题 display:block 然后设置 left 0px 100% . 现在标题横跨图表的整个宽度。现在应用绿色的下边框。你会得到想要的效果。

    在标题的样式属性中,可以

            "width": '100%',
            "display": 'block',
            "left": 0
    

    https://jsfiddle.net/rwmntze8/

    希望这有帮助!

    PS:有人吗 远离的 包含要求的原始图像,由问题中的OP在编辑期间附加 (您可以在编辑修订中找到它) . 我把它附在这里作为参考,以防有人想为什么绿线会一直延伸到尽头。 Original Requirement posted by the OP

        2
  •  4
  •   Community Mohan Dere    7 年前

    您需要做的是修改 style 属性如下:

    title: {
            useHTML: true,
            text: 'Header Text in Line1 </br> Line&nbsp;2 Text',
            style: {
                "text-align": "center",
                "border-bottom": "1px solid green"
            }
        },     
    

    Output

        3
  •  3
  •   daniel_s    8 年前

    只需在下面添加一个空css,仅此而已:

    .highcharts-title {
      border-bottom: 1px solid black;
    }
    

    使用纯CSS(而不是使用JS设置元素样式)可以获得最佳性能。

    实例: http://jsfiddle.net/fqes890o/