HighChart-可以在标题和子标题之间画线

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

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

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

Output

Answer 2

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

您可以在标题的style属性中提供

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

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

希望这会有所帮助！

PS：在编辑过程（您可以在编辑修订版中找到它）时，有人删除了包含需求的原始图像，该图像由问题中的OP附加。我将其附加在此处以供参考，以防万一有人认为绿线为何一直延伸到最后。

Answer 3

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

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

通过纯CSS来做到这一点（而不是通过使用JS设置元素样式）可以为您带来最佳性能。

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