2

Google ビジュアライゼーション API を介して生成されたカスタム CSS フォントをチャートに指定しようとしています。CSS スタイルシート内と Google fonts.googleapis.com の両方でフォントを指定しようとしました

Google Visualization API chartOptions 内:

var options = {
    fontName : 'FranchiseRegular',
    tooltip: { textStyle: { fontName: 'Verdana', fontSize: 12 } }
};

私のstyle.css内：

@font-face {
font-family: 'FranchiseRegular';
src: url('/_fonts/franchise-bold-webfont.eot');
src: url('/_fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('/_fonts/franchise-bold-webfont.woff') format('woff'),
     url('/_fonts/franchise-bold-webfont.ttf') format('truetype'),
     url('/_fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
font-weight: normal;
font-style: normal;
}

私のHEADタグ内：

<link href='http://fonts.googleapis.com/css?family=Magra:400,700' 
      rel='stylesheet' type='text/css'>

そのため、Verdana 呼び出しはうまく機能し、すべてのツールチップが Verdana として正しく表示されます。しかし、タイトル、軸ラベル、チャート ラベルはすべて TimesNewRoman に適用されます。CSS で指定された FranchiseRegular として、または HEAD タグで指定された Magra として表示されるようにしたいと思います。

ここでオプションを徹底的に調べました: https://developers.google.com/chart/interactive/docs/gallery/bubblechart

質問の核心は、適切な構文は何ですか

fontName: <global-font-name>

これらのいずれかを達成するために、chartOptions 内で私の fontName の適切な構文を提供していただければ、非常に感謝します。前もって感謝します！:)

4

1 に答える 1

3

ここに関連する回答があります：

Googleチャートでフォントファミリーを選択？

これは、Google グラフが iframe 内に描画されるため、ドキュメントに設定したスタイルがグラフに適用されないためです。Google がこれを API に追加するまで、簡単な回避策はありません。

編集：

興味深い回避策を見つけました... 古い IE では機能しませんが、Google Visualization API に [ドキュメント化されていない?] オプションがあり、中間の iframe なしでグラフをページに直接レンダリングできます。そうすることで、グラフでは、ドキュメントで定義した任意のフォント ファミリを使用できます。

オプションは "forceIFrame" で、"options" ハッシュ (つまり、fontName オプションと同じハッシュ) で false に設定します。

于 2012-07-31T22:31:23.787 に答える