Highcharts傳奇字體大小

我爲我的網頁使用Highcharts，我似乎無法弄清楚如何正確更改底部標題和關鍵字的字體大小。我使用的是綠色背景的基本列：http://www.highcharts.com/demo/column-basic/dark-green Highcharts傳奇字體大小

目前，這是我的代碼：

Function: 
$(function() { 
    $('#content').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     legend: { 
      itemStyle: { 
       color: 'white', 
       fontWeight: 'bold', 
       fontSize: '20px' 
      } 
     }, 
     title: { 
      text: 'Title', 
      style:{ 
        color: 'white', 
        fontSize: '25px' 
       }  
     }, 
     subtitle: { 
      text: 'Subtitle' 
     }, 
     xAxis: { 
      categories: [ 
       ' ' 
      ] 
     }, 
     yAxis: { 
      min: 0, 
      title: {      
       text: 'MMBTUs x 10,0000', 
       style:{ 
        color: 'white', 
        fontSize: '25px' 
       } 
      }, 
      labels: { 
       style: { 
        color: 'white', 
        fontSize:'25px' 
       } 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: '2009', 
      data: [4900000] 

     }, { 
      name: '2010', 
      data: [4900000] 

     }, { 
      name: '2011', 
      data: [5500000] 

     }, { 
      name: '2012', 
      data: [5200000] 

     }] 
    }); 
});

的Html電話：

<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>

和說我使用Highcharts綠色主題當您點擊視圖視覺主題時，由網站提供。

現在我的問題是，當我改變：

legend: { 
     itemStyle: { 
      color: 'white', 
      fontWeight: 'bold', 
      fontSize: '20px' 
     }

取決於有多大我的字體大小是4個值（2009年，2010年，2011年，2012）可能是沒有visable或移動開箱在圖表下方。盒子本身不調整大小（它在jfiddle中不包含主題）。同樣的事情發生的：

title: { 
     text: 'Title', 
     style:{ 
       color: 'white', 
       fontSize: '25px' 
      }  
    },

根據我的價值，顏色的變化，但字體大小不會。任何幫助，將不勝感激。

來源

2013-07-18 Ryan Sayles

好吧，我不知道什麼是你的代碼錯誤，但是這完全正常工作對我來說：http://jsfiddle.net/kHzr9/2/也許你有舊版本Highcharts的？一般來說，設置'color：'white''並不是最好的想法，我想.. –

該主題使用字體而不是fontSize。所以，它的傳奇定義：

legend: { 
       itemStyle: { 
       font: '9pt Trebuchet MS, Verdana, sans-serif', 
       color: '#A0A0A0' 
       }, 
       itemHoverStyle: { 
       color: '#FFF' 
       }, 
       itemHiddenStyle: { 
       color: '#444' 
       } 

     },

如果你既字體和fontSize的定義的，它會工作（好像對我的錯誤，但也許這是一個功能）：

legend: { 
       itemStyle: { 
       fontSize:'20px', 
       font: '20pt Trebuchet MS, Verdana, sans-serif', 
       color: '#A0A0A0' 
       }, 
       itemHoverStyle: { 
       color: '#FFF' 
       }, 
       itemHiddenStyle: { 
       color: '#444' 
       } 

     },

我認爲標題具有相同的事情。

http://jsfiddle.net/kHzr9/

來源

2013-07-18 17:50:20

Highcharts傳奇字體大小

回答

相關問題