当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to add a border to the title in highcharts

问题描述:

I want to add custom css rules to the title of a chart generated by highcharts.

More precisely i am trying to add a backgound and a border. i tried several approaches however the most stable one is as follows;

 title: {

style: {

color: '#FF00FF',

fontWeight: 'bold',

background-color: 'green',

border: '1px'

}

},

This code works for the color and weight of the font but other options do not work , i also tried (backgroundColor)

ex.=>

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

网友答案:

The problem is that SVG text elements doesn't have border property, so it can't be set. Solution then is to set useHTML:true for title, and render HTML tags instead. For example: 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]        
    }]
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: