最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。 ■公式サイト http://www.highcharts.com/ ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。 個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入（1サイト$80、複数サイト$360）が必要になるので注意です。 ■公式リファレンス http://www.highcharts.com/ref/ おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・ ■実際に導入してみて躓いたポイント 以下、すべてバージョン1.0.2（2009/12/09）での気づきです。 グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書
Javascriptを用いて高度なグラフを描くライブラリHighCharts.jsをRuby on Railsから使うライブラリlazy_high_chartsのアップデートでハマったので、同じようにハマる人がいるかわからないけどメモ。 ちなみに、今の最新は1.4.1。 ハマりどころ1：インストール方法が変わっている 最初にlazy_high_chartsを導入したときには、present：Rails で Lazy high charts を使ってチャートを実装してみたを参考にインストールした（このときが、1.3.2以下のバージョン）。大雑把にいって以下のようにインストールしていた。 Gemfile に lazy_high_chartsを追加する bundle install でライブラリを導入 rails g lazy_high_charts:install で HighCharts.j
Our core library. Includes all standard chart types and more.
この記事はForce.com Advend Calender 2013 9日目エントリーとなります。 http://atnd.org/events/45110 今年のネタを考えるにあたって、去年は何を書いたのかなーと調べてみたら「項目セット」と「Visualforce Charting」について書いていました。 グラフネタと言えば、Winter'14からはAnalytics API（日本語名：分析 API）が公開されているのを思い出しました。 ということで、今年はAnalytics APIを使ってグラフを作成してみます。 グラフはJavaScriptのライブラリであるHighchartsを使う事にします。 まず先にVisualforceで作った完成系のイメージです。 左上にプルダウンを作って、集計値を動的に変更できるようにしてみました。 Salesforceの設定でレポートを作る さて、こ
「highchartsの使い方」の目次 2013/07/03 23:25 ここでは"highchartsの使い方"について書いた記事を紹介しています。 分かりずらい部分はあるかと思いますが、少しでも皆様のお役に立てることができれば幸いです。 ※highchartsは日々進化しています。過去記事の中で使えなくなっている機能・表現等あるかと思います。 そういう場合には、私にどこぞこが間違っている！とそっと教えて頂けると助かります。 1.highchartsのグラフをまずは表示させる方法 2.highchartsを無料ブログ(ここではFC2ブログ)に表示させる方法 3.highchartsの軸の設定方法 (グラフタイトル部分に「charts context menu」が多数表示され見にくい状態になっています。記事内のグラフ数に応じて「charts context menu」のボタンが自動的に増
【初心者用】 Highchartsの使い方2 FC2ブログへの表示方法 2012/07/23 23:37 前回はHighchartsを「一応表示出来るようになる」という所までを紹介しましたが （前回の方法やってみたけど使えないぞ！！という方、コメントください） 今回はHighchartsをブログに表示する方法を紹介したいと思います。 「いやいや、前回作ったコードを記事にコピペするだけだろ？」 私も最初そう思ってました。 ですがそれだけではダメでした(；；) どうすればHighchartsをブログにちゃんと表示できるのか…一緒に見ていきましょう！ 今回は現在私が使っているFC2ブログへのHighchartsの表示方法を説明していきます。 １、まず前回作ったHighchartsのコードをまるごと記事内にコピペします。 ２、記事編集画面の下の方の「記事の設定」の中にある｢改行の扱い」を「HTM
【highcharts】 複数軸を設定したときに目盛線を共有しない方法 2013/03/12 17:48 highchartsで設定されているオプションを見ていきます。 基本的には、Highcharts API Referenceの中から私が使えそうだと思ったものを取り上げていきますので、詳細だったり他の機能も見てみたい方はリンク元を参照してください。 ■alignTicks: 複数の軸を設定したときに右軸と左軸とで目盛線を共有したくない場合にalignTickを使います。 文だと何を言っているのか解らないと思うので、実際にグラフを見てみましょう。 デフォルトでは、alignTicksはtrue(有効)になっているので何も設定しないと以下のグラフになります。 通常私達が使っているのがこれになります。 次に、alignTicksをfalse(無効)に設定するとこのようになります。 グラフの
府中AMeDASの気温の観測値を取得してTwitterにつぶやくbotを動かしているが、ついでにCSVを吐いてこのページにJavaScriptでグラフ表示させていた。 これまでは「dygraphs」を使っていて特別不満があったわけじゃないけど、dygraphsを最新版にしたら動かなくなって修正するのも面倒だったので(苦笑)、新しく「Highcharts」を試してみた。SVGを使った(IE6ではVML)高機能・大変美しいグラフが描けるとのことで、MOONGIFTさんでも紹介されていました。 また、CSVの読み込みはこちらの記事を参考に、改良型の「jquery.csv.js」を使わせて戴きました。 まずはHTMLのヘッダ部。 ※WordPressで表示させているので、JavaScriptのソースURI部分は適宜読み替えて下さい。 <script src="/packages/highchart
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
High Charts Interactive Grids