Google チャートでフォント ファミリーを選択しますか?

Question

Flash 以外の Google グラフ ビジュアライゼーションに font-family を設定することはできますか?具体的には、グラフの軸上のテキストなどです。Google チャートは強力ですが、醜いです。そして残念なことに、gRaphael のようなもっと素晴らしいものに移ることはできません。

Answer 1

テキストスタイルの性質に見てください、例えばhAxis.textStyleを取ります：

hAxis.textStyle: { color: '#FF0000', 
                   fontName: 'Arial', 
                   fontSize: '10' }

Answer 2

たfontName：

あなたは、このようなフォントファミリを変更することができます。

'はArial'

Answer 3

したがって、これらは両方とも技術的に正確な答えですが、少しコンテキストを追加したいと思いました（適切な評判がないためコメントを追加できませんでした）。

1. オブジェクト表記を使用してすべてのテキスト スタイルを渡すのは優れており、Google の POV からグラフ要素のスタイルを設定する場合には間違いなく推奨される方法ですが、最終的には Google がフォント リポジトリに入れるフォントの選択肢によって制限されます。したがって、Segoe UI を示す例の 1 つは機能しません。Google のリポジトリに Segoe UI が存在しないためです。Office Fabric UI アプリケーション内でグラフ API を使用しているため、これは残念です。
2. 別のユーザーは、CSS を介してスタイル設定を実行することを提案しました。これは機能します...ただし画面上のみ。私が見つけたこれらのグラフを印刷する唯一の方法は、次のコマンドを使用してグラフを PNG としてレンダリングすることです。 この方法. 。ただし、もちろん、これは DOM 要素で設定されているものだけを取得します。CSS は考慮されていないため、印刷は予測不能になる傾向があります。

私の解決策は、チャートが「準備完了」状態になった後、PNG としてレンダリングされる前に、読み込まれた jQuery を使用して SVG コンテナー内の要素を直接変更することでした。

google.visualization.events.addListener(chart,'ready',function(){
    var titleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(1)');
    var subtitleText = $('[chart-container] > div > div > svg > g:first-of-type > text:nth-of-type(2)');
    var tooltipText = $('[chart-container] > div > div > svg > g > g').find('text');
    var tooltipStyle = {'font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif'};
    var otherText = $('g > text');
    var textStyle = {'font-family':"'Segoe UI SemiLight WestEuropean','Segoe UI SemiLight','Segoe WP SemiLight','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif"};
    var titleStyle = {'font-size':'21px','font-family':'"Segoe UI SemiLight WestEuropean","Segoe UI SemiLight","Segoe WP SemuiLight","Segoe UI","Segoe WP",Tahoma,Arial,sans-serif',fill:'#333'};
    var titlePos = {x:20,y:30};
    var subtitleStyle = {'font-size':'17px','font-family':"'Segoe UI Light WestEuropean','Segoe UI Light','Segoe WP Light','Segoe UI','Segoe WP',Tahoma,Arial,sans-serif",fill:'#666'};
    var subtitlePos = {y:50,x:20};
    tooltipText.css(tooltipStyle);
    otherText.css(textStyle);
    titleText.css(titleStyle).attr(titlePos);
    subtitleText.css(subtitleStyle).attr(subtitlePos);
});

おそらく、これらすべてを行うためのよりクリーンな方法があるでしょう (私はせいぜいハッカーのプログラマーです)。ホバーするとフォントが元に戻ったり、ツールチップのスタイルが正しく設定されなかったりするなど、まだ解決すべき問題がいくつかありますが、それはこれは、画面に表示される内容と、必然的にユーザーが印刷したい内容との間の一貫性を確保するための最良の方法です。