2013-11-08 3 views
1

Я хочу добавить пользовательские правила css в заголовок диаграммы, сгенерированной с помощью высоких диаграмм. Точнее, я пытаюсь добавить backgound и границу. Я попробовал несколько подходов, однако наиболее стабильным является следующее:Как добавить границу к заголовку в 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/

ответ

10

Проблема заключается в том, что SVG текстовые элементы не имеют свойства границы, поэтому его невозможно установить. Тогда решение должно установить 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]   
    }] 
}); 
Смежные вопросы