グラフ構成エディタでソリッド ゲージグラフの作成

ソリッド ゲージグラフは、既知の範囲の数値を表示する場合に便利です。読者は、現在の値が期待値に基づいて比較的高いか低いかをすぐに判断できます。

グラフ構成エディタを使用すると、Looker の縦棒グラフから開始してソリッド ゲージグラフを作成できます。ソリッド ゲージグラフには、1 つのディメンションと 1 つの measure が必要です。

たとえば、次のソリッド ゲージグラフは、顧客満足度(CSAT) measure の現在の値を示しています。これは、円形の青色の進行状況バーで表されます。CSAT スコアは取り得る値は 0 ~ 100 なので、その値はゲージの両端に表示されます。

前提条件

グラフ構成エディタにアクセスするには、can_override_vis_config 権限が必要です。

JSON スニペットの作成

ソリッド ゲージグラフを作成するには、次の JSON スニペットから始めます。

{
  chart: {
    type: 'solidgauge'
  },
  yAxis: [{
    min: 0,
    max: 100,
    tickAmount: 10
  }],
}

次の値を変更してユースケースに合わせます。

  • yAxis.min 属性は、ソリッド ゲージグラフの最小値を定義します。
  • yAxis.max 属性は、ソリッド ゲージグラフの最大値を定義します。
  • yAxis.tickAmount 属性は、ソリッド ゲージグラフの周囲に表示されるラベルの数を指定します。ラベルは yAxis.min 属性と yAxis.max 属性に基づいて均等に分配されます。

ソリッド ゲージグラフの作成

ソリッド ゲージグラフを作成する手順は次のとおりです。

  1. Explore で縦棒グラフを表示するか、Look またはダッシュボードで縦棒グラフを編集します。

    この例では、1 つのディメンションと 1 つの measure がある 1 つの行を上限とする縦棒グラフから始めることをおすすめします。最初のグラフは次の例のようになります。

    Y 軸に沿って単一の列が配置された縦棒グラフのサンプル。

  2. 可視化の [編集] メニューを開きます。

  3. [プロット] タブで、[グラフ構成を編集] ボタンをクリックします。Looker で [グラフ構成の編集] ダイアログが表示されます。

  4. [グラフ構成(オーバーライド)] セクションを選択し、このページの [JSON スニペットの作成] セクションの HighCharts JSON を入力します。

  5. Looker で JSON を適切にフォーマットするには、[<>(フォーマット コード)] をクリックします。

  6. 変更をテストするには、[プレビュー] をクリックします。

  7. 変更を適用するには、[適用] をクリックします。可視化はカスタム JSON 値を使用して表示されます。

可視化をカスタマイズしたら、保存できます。