HighChart -可以在标题和SubTitle之间划线

Question

在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",
    }
}

​

​

Answer 1

您可以将标题设置为display:block，然后将left设置为0px。然后将宽度设置为100%。现在标题覆盖了图表的整个宽度。现在应用绿色的底部边框。你会得到想要的效果。

在标题的样式属性中，您可以

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

看看这把小提琴- https://jsfiddle.net/rwmntze8/

希望这能有所帮助！

PS:在编辑过程中，有人删除了由OP在问题中附加的原始图像(您可以在编辑版本中找到它)。我把它附在这里，以供参考，以防有人认为为什么绿线会一直延伸到最后。

​

Answer 2

您需要做的是像这样修改style属性：

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

输出

Answer 3

只需要在下面添加一个空的css，仅此而已：

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

通过纯CSS (而不是通过使用JS设置元素样式)来实现这一点，您将获得最佳的性能。

实况示例： http://jsfiddle.net/fqes890o/