Plotly.jsで1つのチャート上でレンジスライダーを実現する

Plotly.jsで1つのチャート上でレンジスライダーを実現する:

はじめに

チャートライブラリPlotly.jsでは、チャート上をマウスドラッグすることで参照するx軸の範囲を指定するレンジスライダーが実現可能です。

しかしこの方法は、データを表示するチャートと、レンジを指定するチャートの2種類が必要です。

このエントリでは1つのチャート上でレンジスライダーのような範囲指定を簡単に実現する方法を紹介します。

やり方

layoutにてselectdirection属性を指定します。

従来はdragmodeがselectの時、チャート上でマウスをドラッグした矩形箇所が選択範囲となります。

しかしselectdirectionで'h'と指定することで、水平方向のみが選択可能となり、垂直方向は最上部から最下部まで常に選択状態となります。

結果、レンジスライダーと同じような選択の動作になります。

const plotLayout = { 
  title: 'Range slider chart', 
  dragmode: 'select', 
  selectdirection: 'h' // 'h' or 'v' or 'd' or 'any' 
}; 

またドラッグ箇所のスタイルを変更するため、plotly_selectingイベントを取得し、ドラッグ箇所を示すDOMのスタイルを指定します。

plotDiv.on('plotly_selecting', (eventData) => { 
  Plotly.d3.selectAll('.select-line,.select-outline-1,.select-outline-2') 
    .style('stroke', 'blue') 
    .style('fill', 'rgba(0, 0, 255, 0.1)'); 
}); 

サンプルコードは下記のとおりです。

See the Pen Range slider chart by Susumu SUZUNASHI (@suzunashi) on CodePen.