如何在Highcharts中向标题添加边框 [英] How to add a border to the title in highcharts

问题描述

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

  title：{
 style：{
 color：'＃FF00FF'，
 fontWeight ：'bold'，
 background-color：'green'，
 border：'1px'
} 
}，
  pre> 
 
 
此代码适用于字体的颜色和重量，但其他选项不工作，我也尝试（backgroundColor）
 
 
 
 ex。=> 
  http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/title/style /  
解决方案
问题是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']，
标签：{
旋转：-90 ，
 align：'right'
} 
}，
 
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0， 176.0] 
}] 
}）; 
  
 
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]        
    }]
});


                        
这篇关于如何在Highcharts中向标题添加边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！