2011-08-09 49 views
3

有没有办法改变hightcharts图表的字体大小jquery? 我试过了字体大小的选项,但它根本不起作用。更改字体大小jQuery的Hightcharts

我试图让图例字体变小一点,以便它可以适合购物车,如果图例长的话不需要创建新线。 也许有人曾试过?

这里是我的脚本:

options = { 

        chart: { 

        backgroundColor: { 

        linearGradient:[0, 0, 500, 500], 

        stops: [ 

         [0, 'rgb(255,255,255)'], 

         [1, 'rgb(237,236, 250)']]}, 

        type: tGraf, 

        renderTo: contGrafik, 

        defaultSeriesType: 'column', 

        width: sWidth 

        }, 

        title: { 

         text: 'Human Resources', 

         style: { 

          font: 'normal 14px Verdana, sans-serif', 

          color : 'black' 

         } 

        }, 

        subtitle: { 

         text: '', 

         style: { 

          font: 'normal 11px Verdana, sans-serif', 

          color : '#000099' 

         } 

        }, 

        xAxis: { 

        title: { 

         text : '' 

        }, 

        labels: { 

         rotation: 0, 

         align: 'right', 

         style: { 

          font: 'normal 11px Verdana, sans-serif', 

          color : 'black' 

         } 

        }, 

        }, 

        yAxis: { 

         allowDecimals : false , 

         labels: { 

         align: 'right', 

          style: { 

           font: 'normal 11px Verdana, sans-serif', 

           color : 'black' 

          } 

         }, 

         gridLineColor: '#EEEFE1', 

         title: { 

          text: 'Employees', 

          style: { 

           font: 'normal 13px Verdana, sans-serif', 

           color : 'black' 

          } 

         } 

        }, 

        plotOptions: { 

        column: { 

         dataLabels : { 

          enabled : true, 

          formatter: function() { 

           return this.y; 

           } 

          }, 

         cursor: 'pointer' 

         }}, 

        legend: { 

         itemWidth : uLegend, 
         style: { 

           font: 'normal 5px Verdana, sans-serif', 

           color : 'black', 

          } 

         symbolPadding: 2, 

         symbolWidth: 15, 

         backgroundColor: '#FFFF99', 

         itemStyle: { 

          cursor: 'pointer', 

          color: '#3E576F' 

         }, 

         width: 600, 

         align: 'center', 

         layout: 'horizontal'}, 

        tooltip: { 

         formatter: function() { 

         return '<b>'+ this.series.name +'</b><br/>'+this.y + ' Orang'; 

         } 

        } 

       }; 

回答

14

你可能会寻找一个传奇的itemStyle选项:

legend: { 
    itemStyle: { 
     color: '#000000', 
     fontWeight: 'bold', 
     fontSize: '8px' 
    } 
} 
+0

噢,我还没有尝试之前:D 现在它工作完美XD – Xinez

0

我相信由Igor给出的答案是好的,但如果你想只需打开highchart.js文件并在其中放置所需的字体样式即可。只是提供了我在我的情况下所做的修改:

style:{fontFamily:' "Exo 2", sans-serif',fontSize:"12px"},backgroundColor:"#FFFFFF" 

这里我已将“Lucida”更改为“Exo 2”。 :)

+0

为什么不使用'Highcharts.setOptions({图:{style:{fontFamily:'...'}}});'? –

+0

我的答案是针对您要更改每个页面中的高图表文本的情况。然后,只需在highchart.js文件本身中进行更改。无需其他更改。 –