石田修二ホームページ　＞　コンピュータメモ　＞    （サイト内検索）

Highcharts

このページは何？

HighchartsはWeb上でグラフを生成するツールです。

• Highcharts - Interactive JavaScript charts for your webpage (http://www.highcharts.com/)
  いわゆる公式サイト。

どんなグラフが作成できるかは，サンプルを参照して下さい。

その他のサンプル

• 四日市花火大会事業費補助金の推移（縦棒グラフ）
• 日本のツナ缶（マグロ・カツオ類）生産量（縦棒グラフ）
• 四日市市の気温（折れ線グラフ）
• 預貯金の平均保有額と金融資産を保有しない世帯の推移（折れ線と縦棒の複合グラフ 2）
• 四日市市の平均気温と降水量（折れ線と縦棒の複合グラフ 1）
• 茶類の国内生産量（折れ線グラフ）
• 55本塁打達成者のペース比較（折れ線グラフ）
• 三重県における猫の殺処分件数（縦棒グラフ）
• コーヒーと紅茶の関係（散布図）
• 顧客評価（レーダーチャート）

上の例は全てデータはページに埋め込まれていたが，それとは異なり，外部のcsvファイルを読み込む例

• サンプル1
• サンプル2（3つのデータを取り込んでみる）

使えるようにするには

バージョン 5.0.0 からファイルの構成が変わったようです。js フォルダは code フォルダに変わりました。

サンプルのグラフのソースを見てみて下さい。

ポイント1。headタグには次のおまじないを挿入します。

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

ポイント2。bodyタグの中には次のおまじないを入れます。jsフォルダのhighcharts.jsとexporting.jsを呼び出します。

<script src="/code/highcharts.js"></script>
<script src="/code/modules/exporting.js"></script>
<div id="container" style="min-width: 390px; height: 450px; margin: 0 auto"></div>

うちの設定

（ちなみに私は自分のサーバに入れたjqueryを使いたい時は次のおまじないを入れています）

headタグ。

<script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="hogehoge.js"></script>

bodyタグの中には次のおまじないを入れます。

<script src="/lab/highcharts/code/highcharts.js"></script>
<script src="/lab/highcharts/code/modules/exporting.js"></script>
<div id="container" style="min-width: 390px; height: 450px; margin: 0 auto"></div>

legend

凡例の設定。例えば，凡例を表示しないのであれば，次のように書きます。

legend: {
    enabled: false
},

参考

• Ishida's Blog Part4 の Highcharts タグ

リンクはご自由にどうぞ。

【石田修二トップページ】　【コンピュータメモ】

Last modified: 2017-05-24 00:52:41