絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp
Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ドーナッツの幅は、percentageInnerCutout で調整できます。 ラインチャート お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。 ※ 横軸のラベルは、意図的に減らしています。 バーチャート 棒グラフもフラットにしてみました。こちらも数
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
PHPベースのグラフ生成ライブラリ·pChart MOONGIFT
システムに入れたデータは何らかの形で出力される。多いのはグラフや表だろう。表は数値を細かく判断する場合には便利だが、もっと感覚的に肌で違いを感じられるのはグラフの方だ。そのため、グラフ作成に関するニーズは多い。 曲線を描くグラフ グラフを生成するライブラリは数多く存在するが、使い勝手や機能面で物足りない思いをしている人もいるだろう。そこでこちらをご紹介。 今回紹介するオープンソース・ソフトウェアはpChart、PHP向けのグラフ生成ライブラリだ。 pChartは折れ線グラフ、面グラフ、棒グラフなどを画像として生成することができる。細かな指定ができ、各要素が離れた円グラフ、なんてことやポインタに画像を使ったりすることもできる。もちろん複数の要素を同時に表示したり、折れ線グラフと面グラフを合わせるなんてこともできる。 コメント付き PHP単独で作られているので、PHPでシステムを構築している場
amCharts: customizable free flash charts
JavaScript Charts & Maps Programming library for all your data visualization needs. Readme.md Came here to find your next charting library? Good. Our charts were designed to feel modern, sleek and fast, out-of-the box. But don’t take our word for it – check out our demos and fall in love. And best of all, our libs natively integrate with TypeScript, Angular, React, Vue and plain JavaScript apps. F
グラフ作成やデータ可視化を楽に美しくできる便利なサービス22個まとめ | Web担当者Forum
このコーナーでは、ネットビジネスを強力に支援する製品について、それを支える技術や市場動向を説明し、さらに各社から提供されている製品を紹介する。競合商品がひしめく市場で、他社に差を付けるための武器として、ぜひ導入を検討してみてほしい。今回は、「グラフ作成・データ可視化」サービスだ。 売り上げの推移、業界におけるシェア、自社製品の出荷数内訳などなど…。「顧客の説得のため、ウェブサイトでもグラフ要素を掲載したい」といったケースは増えている。大手企業では、PHPを使いデータベースと連動させて動的に最新グラフを表示させる、といった仕組みを用意できる場合もあるが、たいていは「エクセルで作成したグラフを画像として貼り付け」といった、手作業感あふれるものだった。 だが、昨年末にGoogle Chart APIが登場して以降、さまざまなサービスや独自APIが増加し、選択肢がグッと増えてきた。無料で利用できる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.