web-dev-qa-db-ja.com

ハイチャートのテキストの色を変更する方法

これはかなり単純なはずですが、私はハイチャートのドキュメントを調べましたが、特にテキストの色に対処するオプションを見つけられないようです（対照的に、背景、境界線、線などに特定の色のオプションがあります）。次に chart.style オプションを見つけました。それは動作するように見えます-動作しません。

この jsfiddleデモ では、フォントファミリを変更できたが、色は変更できなかったことがわかります。

何が欠けていますか？

javascripthighcharts
13
benekastah

チェック この例 、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'
         }            
      }
   },
});
44
maialithar

この例のy軸に対して行ったように、高グラフのほとんどすべてのオプションにスタイルを適用できます。

http://jsfiddle.net/h3azu/

このページに行くこともお勧めします

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

「表示オプション」をクリックすると、「スタイル」オプションを使用してテキストに色を付けることができる他の方法がわかります。

3
BananaNeil

Highcharts.src.jsに目を通すと、個々の要素のスタイルを設定できます。たとえば、例のグラフをタイトルに変更すると、色が取得されます。

  title: {
    style: {
        fontFamily: 'monospace',
        color: "#f00"
    }
}
1
WooHoo

ドキュメント

title:{
  text: 'Something',
  style: {"color": "#003C71", "fontSize": "18px"}
}
0
Farhan