2011-12-22 6 views
9

これはかなりシンプルなはずですが、ハイチャートのドキュメントを熟読して、特にテキストの色を指定するオプションを見つけることができませんでした(対照的に、背景、境界線、線などのために)。その後、私はchart.styleオプションを見つけました。それはが動作するようにと思われますが、そうではありません。ハイチャートのテキストの色を変更するには

このjsfiddle demoでは、フォントファミリーは変更できましたが、色は変更できませんでした。

私には何が欠けていますか?

答えて

32

チェックthis example、私はあなたのjsfiddleのラベルの色を変更することができました。ここにはすべてのオプションパラメータがあります:

Highcharts.setOptions({ 
    chart: { 
     style: { 
      fontFamily: 'monospace', 
      color: "#f00" 
     } 

    }, 
    title: { 
     style: { 
     color: '#F00', 
     font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    xAxis: { 
     gridLineWidth: 1, 
     lineColor: '#000', 
     tickColor: '#000', 
     labels: { 
     style: { 
      color: '#F00', 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
     } 
     }, 
     title: { 
     style: { 
      color: '#333', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      fontFamily: 'Trebuchet MS, Verdana, sans-serif' 

     }    
     } 
    }, 
    yAxis: { 
     minorTickInterval: 'auto', 
     lineColor: '#000', 
     lineWidth: 1, 
     tickWidth: 1, 
     tickColor: '#000', 
     labels: { 
     style: { 
      color: '#F00', 
      font: '11px Trebuchet MS, Verdana, sans-serif' 
     } 
     }, 
     title: { 
     style: { 
      color: '#333', 
      fontWeight: 'bold', 
      fontSize: '12px', 
      fontFamily: 'Trebuchet MS, Verdana, sans-serif' 
     }    
     } 
    }, 
}); 
3

私は、この例では、y軸に行っているように、ほとんどの高チャート内のすべてのオプションは、それに適用されるスタイルを持つことができます。

http://jsfiddle.net/h3azu/

私も、このページに行く

をお勧めします

http://www.highcharts.com/demo/combo-dual-axes

と「スタイル」オプションは、カラーテキストに使用できる他の方法のアイデアを得るために、「表示オプション」をクリックします。

1

highcharts.src.jsを見ると、個々の要素をスタイルすることができます。たとえば、私はあなたの例の図表をタイトルに変更し、色を取得しました。

title: { 
    style: { 
     fontFamily: 'monospace', 
     color: "#f00" 
    } 
} 
関連する問題