2011-08-09 15 views
3

hightcharts jqueryでグラフのフォントサイズを変更する方法はありますか? fontsizeオプションを試しましたが、まったく動作しません。フォントサイズを変更するJquery Hightchart

凡例が長くなると新しい行が作成されずにカートに収まるように、凡例のフォントを小さくしようとしました。 多分誰でもこれを試しましたか?ここ

は私のスクリプトです:

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

私はイゴールによって与えられた答えは良いですが確信している、しかし、あなたがしたい場合はグラフ内のすべての場所のテキストをワンショットで変更し、highchart.jsファイルを開き、そこに目的のフォントスタイルを配置します。

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

ここでは、私が「エキソ2」「ルシーダ」に変更されました。ただ、私は私の場合で行った変更を提供します。 :)

+0

なぜHighcharts.setOptions({chart:{style:{fontFamily: '...'}}})) 'を使用しないのですか? –

+0

私の答えは、すべてのページでハイチャートのテキストを変更したい場合です。次に、highchart.jsファイル自体の変更を行います。追加の変更は必要ありません。 –

関連する問題