javascript - 如何在highcharts中为标题添加边框

Question

我想将自定义 css 规则添加到 highcharts 生成的图表的标题中。 更准确地说，我正在尝试添加背景和边框。我尝试了几种方法，但最稳定的方法如下；

 title: {
            style: {
                color: '#FF00FF',
                fontWeight: 'bold',
                background-color: 'green',
                border: '1px'
            }
        },

此代码适用于字体的颜色和粗细，但其他选项不起作用，我也试过(backgroundColor)

例如=> http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/title/style/

Answer 1

问题是 SVG 文本元素没有 border 属性，因此无法设置。解决方案是为标题设置 useHTML:true，然后渲染 HTML 标签。例如:http://jsfiddle.net/3bQne/668/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    title: {
        useHTML: true,
        style: {
            color: '#FF00FF',
            fontWeight: 'bold',
            'background-color': 'green',
            border: '1px solid black'
        }
    },
    xAxis: {
        categories: ['01/02/2012','01/03/2012','01/04/2012','01/05/2012','01/06/2012','01/07/2012'],
        labels: {
            rotation: -90,
            align: 'right'
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]        
    }]
});