PR

SVGのグラデーションとJavaScriptとの連携

2012年5月17日(木)
土井 毅(著)山田祥寛(監修)

SVGの活用例 - グラフライブラリ「Highcharts」

前回で述べた通り、SVGはグラフの描画などに向いていますので、いくつかのJavaScriptライブラリがSVGを使ったグラフ機能を提供しています。その中でもHighcharts(http://www.highcharts.com/)は、SVGを使ったリッチなグラフ描画機能を提供し、多くのWebサイトで活用されています。

Highchartsはグラフ描画にSVGを使用していますが、VML(Vector Markup Language)と呼ばれるSVGと類似の技術を使うことで、SVGをサポートしないIE8以前のバージョンもサポートしています。同様に、SVGをサポートしていないAndroid 2.x系列も、CanVGと呼ばれる、Canvasを使ってSVGを表示するJavaScriptライブラリを使うことで、機能限定ながらサポートしています。これにより、Webブラウザのバージョンをあまり気にすることなくSVGによるグラフ機能を活用できます。以下はHighchartsを使ったグラフのサンプルです。

 図9:Highchartsを使った折れ線グラフ(クリックで拡大)
 図10:Highchartsを使った折れ線・棒・パイチャートの組み合わせグラフ(クリックで拡大)

まとめ

前回と合わせ、SVGの基本的な図形描画、グラデーション、SVGをJavaScriptから処理する方法について解説しました。このほかにもSVGにはビットマップ画像との重ね合わせ、変形やアニメーション機能など、様々な機能が用意されています。HTML5の本格的な普及に合わせ、SVGが活躍する分野も増えてくることでしょう。

HTMLの周辺技術について解説する本シリーズも今回が最終回となります。HTML5本体の魅力的な機能に目が行きがちですが、CSS3・SVG共にHTML5の可能性を大きく広げてくれる技術ですので、引き続き活用していきましょう。本シリーズがその参考となれば幸いです。

Think IT会員限定特典
  • SVGのグラデーション、JavaScriptとの連携サンプル

著者
土井 毅(著)山田祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています