グラフをカスタマイズする¶

1. 変更方法¶

色やテキストなど、グラフの見た目はある程度変更することができます。

サンプルデータを用意していますので変更してみます。

1-1. スタイルファイルを編集する¶

{paplotをインストールしたディレクトリ}/example/default.js

このファイルをコピーして {paplotをインストールしたディレクトリ}/example/mystyle.js というファイルを作成します。

※ファイル名は任意ですが、拡張子は .js にしてください。

作成したファイルを開いて次の箇所を変更します。

今回はqcグラフのcoverage グラフの色を変更します。

// 7行目
// 変更前
bar_coverage_color: [
  "#1F77B4", // ratio_30x
  "#FF7F0E", // ratio_20x
  "#2CA02C", // ratio_10x
  "#D62728", // ratio_2x
],

// 変更後
 bar_coverage_color: [
  "blue",    // ratio_30x
  "pink",    // ratio_20x
  "#CCFF66", // ratio_10x
  "#330066", // ratio_2x
],

注釈

色の指定はRGBもしくは色名で指定することができます。

// RGBで指定する場合
bar_select_color: "#1F77B4",
// color nameで指定する場合
bar_select_color: "red",

RGBで指定する場合

Red → Green → Blueの順に 00～FF まで、6桁の16進表記で指定し、先頭に # をつけてください。

色名(カラーネーム)について

UNIX X11カラーといい、わかりやすくするために140色に名称がついています。
ここで定義されている色名であれば、RGB値の代わりに指定することができます。

https://www.w3.org/TR/css3-color/#svg-color

1-2. 設定ファイルを編集する¶

{paplotをインストールしたディレクトリ}/example/example.cfg

このファイルを開いて次の箇所を変更します。

スタイルファイルを今回作成したものを使用するように変更します。

[style]
path = {paplotをインストールしたディレクトリ}/example/mystyle.js

# ~/tmpにインストールした場合はこのようになる
# ~/tmp/paplot/example/mystyle.js

1-3. 出力する¶

cd {paplotをインストールしたディレクトリ}
pa_plot qc "example/qc/*.csv" ./tmp STYLE --config_file example/example.cfg

作成されたHTMLファイルをブラウザで開いてください。

次のようにQCのcoverageグラフの色が変更されていますか？

1-4. 出力されたファイルを変更する¶

上で作成したファイルは次のディレクトリにコピーされています。

すでにpaplotで出力したHTMLファイルを変更する場合、スタイルファイル (mystyle.js) を編集し、再読み込み(ブラウザで F5 )すれば反映されます。

./tmp
  ├ STYLE
  │   ├ graph_qc.html
  │   └ graph_sv.html
  │
  ├ js
  ├ lib
  └ style
      ├ default.js     <--- デフォルト
      └ mystyle.js     <--- 今回作成したファイル