HIGHCHARTS CLOUD でグラフを作成しています

北アルプス 黒部五郎岳 ウェブサイトメモ

投資資産の推移などのグラフをアップするとき、 「HIGHCHATS CLOUD」がとても便利で使っています。

これまではオフィスフリーソフト「LibreOffice Calc 」の機能を使ってグラフを作成していましたが、最終的に画像にしてアップする必要があり不便でした。

「HIGHCHATS CLOUD」は レスポンシブに対応しており、あとからデータを変更追加もできます。

スポンサーリンク

まずはアカウント作成から

アカウントを作成してから作業に入ると、保存後データの変更と追加が可能になります。

まずはこの画面から、アカウントを作りましょう。

highchart-sign-in

折れ線グラフを4ステップで作成します

基本の「折れ線グラフ」を、4ステップで作成していきます

  1. テンプレートを選ぶ
  2. タイトルをつける
  3. データをインポートする
  4. グラフをカスタマイズする
highcharts-new-chart

ステップ2でタイトルを入力し、ステップ3のデータインポートに移ります。

データをインポートします

表計算シートで作成したデータをカットアンドペーストでインポートします。

以下のNYダウのデータをインポートします

項目名もいっしょにコピーします。

インポート画面で「cut and paste」を選択

highchart-import

データをペーストします

年月・NYダウなどのラベルを含めてペーストします。

インポート画面

いよいよカスタマイズです

英語表示なので最初少し苦労しました。いろいろ試していけば機能が理解できると思います。

Chart

  • Dimension(大きさ)
    Chart width,Chrart heightともautoのまま
  • Title(タイトル)
    タイトルのスタイルを設定変更します
  • Appearance(外観)
    Chart Area,Plot Areaの下地や枠の設定変更します
  • Tooltip(マウスオーバー表示)
    Enable tooltipにチェックでマウスオーバー表示オン
    Shared between seriesにチェックで複数データ表示
    Value Suffix→表示数値後ろに単位などを付与
  • Interaction
  • Credits
    有料アカウントで「powered by Highcharts Cloud」の表示を消せるようです。

Axis(X軸・Y軸)

  • Axis title
  • Text
    軸にテキストを付与
  • Axis labels format
    {value}USU→123USD
    USD {value:.2f} →USD123.45
  • Type
    linear:通常の数値目盛り
    logarithmic:対数目盛り
    datetime:日付時刻目盛り
    category:等間隔目盛り

Typeの初期設定がlinearになっており、最初に表示されるグラフはこのようになっていました。

chart-linear

今回作成のチャートのX軸のTypeは「category」を選択する必要があります。こうなります。

chart-category

Data Series

  • Series type
    line→折れ線グラフ
    spline,column,areaなど他のチャートに変更することができます
  • Dash Style
    線の種類を選びます
  • Marker symbol
    ポイントマーカーの形
  • Color by point
    ポイントごとに色を変える
  • Enable point markers
    ポイントマーカーを使うかどうか

Export>Exporting(エクスポート設定)

chart画像やchartデータのエクスポート機能を設定します。デフォルトではEnable exportingにチェックが入っています。

この場合、チャートの右上にメニューボタンが表示され閲覧者がチャートの画像やもとのデータをダウンロードできたりします。

基本的にはチェックは外しておくべきでしょう。

Legend(凡例)

  • General
    Enable legendにチェックで凡例表示
    Item layoutで凡例の並び方を指定
  • Placement
    凡例の表示場所を指定
  • Appearance
    凡例のスタイルを指定

Localization(特定地域に合わせた変更)

特定地域に合わせて小数点や3桁区切り記号などの変更を指定します。とくに変更は必要ないと思います。

Action(SaveとPublish)

画面右上のActionのドロップダウンメニューからSaveをクリックしデータをセーブし、Publishでチャートの埋め込みコードを取得します

Publish

highchart-publish

コードを埋め込みました

下のチャートは実際にコードを埋め込んで表示させています。

データ更新の注意点

後日、データの変更と追加ができます。

ログイン後、一番左側の青色メニューから「Charts」を選び、セーブしたチャートを表示させます。

目的のチャートを選び、データの変更と追加、チャートのカスタマイズができます。

更新後次の作業をします。

  1. Action>Save
  2. Action>Publish>Publishボタンをクリック

ただし、コードを貼り付け直す必要はありません。

更新されたチャートがでないことが…

データを更新したにもかかわらず、同じブラウザで確認しても更新されたチャートが出てこない場合があります。

ブラウザに更新前のデータが残っていて更新後のチャートが表示されないことがあります。その場合はブラウザに残っているキャッシュの消去が必要です。

まとめ

英語表記など使いにくい部分もありますが、基本的なチャートは作成できます。

データの追加更新ができるところが便利です。

ウェブサイトメモ
スポンサーリンク
シェアする
ナワキミノをフォローする
投資とネットと年金生活