HighChartsビジュアルのY軸の単位をデータに応じて変えたい

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

HighChartsビジュアルで、Y軸の単位を金額に応じて変更することは可能でしょうか。例えばQuickSightの「垂直積み上げ棒グラフ」ビジュアルですと、フィルタ後の金額に応じて自動的にY軸の単位がMからKといった風に適切に変わり、棒グラフの表示も見やすくなりますが、HighChartsビジュアルでも同様の動作に設定することは出来ますか？

カラム設定
chart type: column
xAxis: 日付 [“getColumnFromGroupBy”, 0]
yAxis: 売り上げ(SUM) [“getColumnFromValue”, 0]

コード

{
  "chart": {
    "type": "column"
  },
  "xAxis": {
    "categories": ["getColumnFromGroupBy", 0],
    "labels": {
      "formatter": ["formatValue", "value", 0]
    },
    "title": {
      "text": "Week"
    }
  },
  "yAxis": {
    "min": 0,
    "title": {
      "text": "GMS (K)"
    },
    "labels": {
      "format": "{value} K"
    }
  },
  "tooltip": {
    "headerFormat": "<span style='font-size:16px'>{point.key:%Y/%m/%d}</span><table><br/>",
    "shared": true,
    "useHTML": true
  },
  "plotOptions": {
    "column": {
      "borderWidth": 0,
      "grouping": false,
      "shadow": false,
      "minPointLength": 100
    }
  },
  "legend": {
    "enabled": true
  },
  "series": [
    {
      "type": "column",
      "name": "This Year",
      "color": "rgba(124,181,236,1)",
      "data": [
        "map",
        ["getColumnFromValue", 0],
        {
          "y": ["*", ["item"], 0.001]
        }
      ],
      "tooltip": {
        "pointFormat": "<span style=\"color:{series.color}\">\u25CF</span> {series.name}: <b>{point.y:.1f}K</b><br/>"
      },
      "dataLabels": {
        "enabled": true,
        "format": "{point.y:.1f}K",
        "style": {
          "fontSize": "12px",
          "fontWeight": "bold",
          "textOutline": "none"
        },
        "y": -25
      },
      "pointPadding": 0.2,
      "pointPlacement": 0.0,
      "zIndex": 2
    },
    {
      "type": "column",
      "name": "Last Year",
      "color": "rgba(200, 200, 200, 0.8)",
      "data": [
        "map",
        ["getColumnFromValue", 1],
        {
          "y": ["*", ["item"], 0.001]
        }
      ],
      "tooltip": {
        "pointFormat": "<span style=\"color:{series.color}\">\u25CF</span> {series.name}: <b>{point.y:.1f}K</b><br/>"
      },
      "pointPadding": 0.25,
      "pointPlacement": -0.15,
      "zIndex": 1
    },
    {
      "type": "line",
      "name": "YoY",
      "showInLegend": false,
      "color": "transparent",
      "data": [
        "map",
        ["getColumnFromValue", 2],
        {
          "y": ["*", ["item"], 100]
        }
      ],
      "tooltip": {
        "pointFormat": "<span style=\"color:{series.color}\">\u25CF</span> {series.name}: <b>{point.y:.1f}%</b><br/>"
      },
      "dataLabels": {
        "enabled": true,
        "format": "<div style='background-color: rgba(255,255,255,0.7); padding: 3px; border-radius: 3px;'>{y:.1f}%</div>",
        "style": {
          "fontSize": "13px",
          "fontWeight": "bold",
          "textOutline": "none"
        },
        "useHTML": true,
        "y": 1000
      },
      "marker": {
        "enabled": false
      }
    }
  ]
}
2

@hhhayama さん、ご質問ありがとうございます。

プロットするデータの値に応じてY軸の単位を自動で変えたい場合、通常のHighchartsだと以下のようにformatterの内部でJavaScriptを使った表現にする必要があるかと思います。

yAxis: {
    labels: {
        formatter: function() {
            if (this.value >= 1000000) {
                return (this.value / 1000000) + 'M';
            } else if (this.value >= 1000) {
                return (this.value / 1000) + 'K';
            }
            return this.value;
        }
    }
}

しかしながら、あいにく現状ではQuickSightのHighchartsはJavaScriptを使ったチャートコードの表現はサポートされておらず、JSONで記述可能な内容に限られてしまいます。

静的な表現で良ければ、yAxisを以下のように書き換えると”K”での表示ができますが、動的に"K"や"M"を切り替えるといったことはできません。

"format": "{(divide value 1000):,0.1f}K"

こちらについては製品チームへのフィードバックのため、Feature-Requestとしてアーカイブさせていただけますでしょうか。

ちなみに、頂いたチャートコードを拝見した限りでは、通常の垂直積上げ棒グラフでも表現が可能かと思いましたが、こちらで代替していただくことは可能でしょうか？