折れ線グラフのY軸レンジ変更

日本語で質問 | Q&A
,
1

折れ線グラフにてX軸に日付、Y軸にflag列を入れ平均にすることで率を表示しています。
ダッシュボード上でY軸の上限を自由に編集したいのですがそのような機能はないでしょうか？

パラメータと計算フィールドを組み合わせ、指定値を超えるものは指定値に書き換えることをしましたが、Y軸の上限はそれよりも少し大きな値となってしまうのと、指定値を超えたものを色分けで表示などもできず、分析上でY軸の上限を下げた時と同様の見た目にできませんでした。

2

@disuisin

ご質問ありがとうございます。折れ線グラフの Y 軸上限をダッシュボード上で動的に変更したい、というご要望ですね。結論からお伝えすると、標準機能だけでは実現できませんが、カスタム Highcharts ビジュアルを使えば実現可能です。

まずお試しになった「パラメータ＋計算フィールドで指定値にクリップする」方法についてですが、この方法では Y 軸上限そのものは動かせず（軸は自動で最大値の少し上まで余白を取ります）、色分けもできないため、分析画面で Y 軸上限を下げたときと同じ見た目にはなりません。これは方式自体の限界です。

なぜなら、Y 軸の Range（レンジ）は分析画面の「Y-Axis → Range → Custom」で設定するものですが、ダッシュボードビューでは調整できず固定されるためです。また Data zoom（データズーム）は X 軸（グループ軸）でのみ利用可能で、Y 軸には対応していません。

参考：

方法の比較

代替アプローチは大きく「Highcharts なし」と「Highcharts あり」の 2 つに分かれます。まず全体像を比較表でまとめます。

① 難易度・おすすめ度（★が多いほど「高い／難しい」）

観点

Highcharts なし（標準ビジュアル）

Highcharts あり（カスタムビジュアル）

導入の難易度

★☆☆☆☆（標準ビジュアルのみ。特別な準備は不要）

★★★☆☆（Highcharts ビジュアルの追加と基本操作の把握が必要）

実装の難易度

★★☆☆☆（計算フィールド 2〜3 個とパラメータ設定のみ）

★★★★☆（JSON 式言語での記述と、フィールド並び順の管理が必要）

おすすめ度

★★★☆☆（Y 軸上限は固定でよく、色分けだけしたい場合に最適）

★★★★★（Y 軸上限の動的変更と色分けを両立できる唯一の本命）

★の見方：導入・実装の難易度は「★が多い＝難しい」、おすすめ度は「★が多い＝おすすめ」。

② 機能で満たせること

機能

Highcharts なし

Highcharts あり

Y 軸上限を動的に変更

✕ できない（軸は固定）

◎ できる（唯一の方法）

閾値超えの色分け

◯ できる（別シリーズで再現）

◎ できる（zones で自動色分け）

閾値ラインの動的表示

◯ できる（参照線をパラメータ連動）

◎ できる（plotLines）

記号の見方：◎ しっかり対応／◯ 対応可（やや簡易）／✕ 非対応。

おすすめ： ご要望（①上限を動的に変える ②閾値超えを色分け）を両方満たせるのは Highcharts ありの方法だけです。ただし導入・実装のハードルはやや上がります。「上限は固定でよいが色分けだけしたい」であれば Highcharts なしでも十分です。

以下、それぞれの手順を説明します。

方法1：Highcharts なし（標準ビジュアル）

Highcharts を使わず、標準の折れ線ビジュアルで「閾値超えの色分け」と「閾値ラインの動的表示」を実現する方法です。Y 軸上限そのものは動かせませんが、追加の学習コストが低く手軽に導入できます。

手順

1. 閾値パラメータとコントロールを作成

  • 名前: Threshold / データ型: Number / 既定値: 例 80

  • スライダー（または数値入力）のコントロールを追加します。

2. 計算フィールドを作成（分析画面。flag が 0/1 の数値である前提）

  • 率: rate = 100 * avg({flag})

  • 閾値超えのみ: rate_over = ifelse(100 * avg({flag}) >= ${Threshold}, 100 * avg({flag}), NULL)

  • 閾値以下のみ: rate_under = ifelse(100 * avg({flag}) < ${Threshold}, 100 * avg({flag}), NULL)

3. 折れ線に 2 本重ねて色分け

  • 折れ線ビジュアルの「値」に rate_under（緑）と rate_over（赤）を入れ、閾値を境に色が切り替わるようにします。

4. 閾値ラインを動的表示（任意）

  • 同じ Threshold パラメータを参照する参照線（Reference line）を追加すると、スライダーに連動して閾値ラインが上下します。

ポイント・制約

  • 閾値超えの色分けと、閾値ラインの動的表示は実現できます。

  • ただし Y 軸上限そのものはダッシュボードで動かせません（分析画面の Custom Range で固定）。

  • NULL を使うことで、該当しない区間には線が引かれません。

参考：

方法2：Highcharts あり（カスタムビジュアル）

ご要望（①上限を動的に変える ②閾値超えを色分けする）を両方満たせる方法です。ポイントは、パラメータの値を計算フィールド経由で Highcharts に渡し、yAxis.max に反映させることです。

なお、Highcharts の式言語には getParameter のような「パラメータを直接参照する関数」はありません。パラメータを計算フィールドに格納し、それを列としてフィールドウェルに追加したうえで、["get", ["unique", ["getColumn", N]], 0] で単一値に戻して渡すのが正しい方法です。

手順

1. パラメータを作成

  • 名前: YAxisMax / データ型: Number / 既定値: 例 100

2. コントロール（スライダー）を追加

  • YAxisMax にスライダー（最小 0・最大 100・ステップ 5 など）を追加します。これがダッシュボード上の「上限つまみ」になります。

3. 計算フィールドを 2 つ作成（分析画面）

  • 率（flag が 0/1 の数値である前提）: rate = 100 * avg({flag})

  • 上限値を列として渡すフィールド: ymax_col = ${YAxisMax}

4. Highcharts ビジュアルを追加し、フィールドを配置

  • ビジュアルタイプで「Highcharts visual」を選択します。

  • フィールドウェルに 日付 → rate → ymax_col の順（getColumn の index 0 / 1 / 2 に対応）で入れます。

5. Chart code に以下の JSON を貼り付けて APPLY CODE

{
  "chart": { "type": "line" },
  "xAxis": {
    "categories": ["getColumn", 0],
    "title": { "text": "日付" }
  },
  "yAxis": {
    "min": 0,
    "max": ["get", ["unique", ["getColumn", 2]], 0],
    "title": { "text": "率 (%)" },
    "labels": { "format": "{value}%" },
    "plotLines": [
      {
        "value": ["get", ["unique", ["getColumn", 2]], 0],
        "color": "#F85149",
        "width": 1,
        "dashStyle": "Dash",
        "zIndex": 5,
        "label": { "text": "上限", "align": "right" }
      }
    ]
  },
  "tooltip": { "valueDecimals": 1, "valueSuffix": "%", "shared": true },
  "plotOptions": {
    "line": {
      "zones": [
        { "value": ["get", ["unique", ["getColumn", 2]], 0], "color": "#3FB950" },
        { "color": "#F85149" }
      ]
    }
  },
  "series": [
    { "type": "line", "name": "率", "data": ["getColumn", 1] }
  ]
}

仕組み

  • yAxis.max に ["get", ["unique", ["getColumn", 2]], 0] を渡すことで、ymax_col 列（全行同値）を単一値に変換し、Y 軸上限に反映します。スライダーを動かすと列の値が変わり、Y 軸上限が即座に変わります。

  • plotOptions.line.zones により、上限値を境に「以下＝緑」「超過＝赤」で線の色を自動分割します。これで閾値超えの色分けも実現できます。

  • plotLines で上限位置に破線を表示し、視認性を高めています。

注意点

  • Highcharts ビジュアルのエディタは CSS・JavaScript・HTML を受け付けません（JSON スキーマと式言語のみ）。上記はすべて式言語の範囲内で動作します。

  • getColumn の index はフィールドウェルの並び順に対応します。日付 → rate → ymax_col の順を守ってください。

  • ["get", ..., 0] の配列インデックスが 0 始まりか 1 始まりかは環境で確認することをおすすめします。もし 0 でうまくいかない場合は ["get", ..., 1] をお試しください。まずビジュアルのタイトルに ["get", ["unique", ["getColumn", 2]], 0] を出力してみると、単一値が取れているか簡単に確認できます。

参考：

3

ご回答ありがとうございます。
Highcharts visualにて希望のものを作成することができました。

ただ作成難易度が高いため、
標準機能としての追加をご検討いただけますと幸いです。