IgcDataChart を使用して箱ひげ図を作成する

IgcDataChart の財務シリーズ( IgcFinancialPriceSeries )を使用し、箱ひげ図を表現することが可能です。

まずは igc-data-chart に igc-financial-price-series を追加し、display-type を “Candlestick” に設定してロウソク足チャートを作成します。

<igc-data-chart name="boxWhiskerChart" id="boxWhiskerChart" width="550px" height="400px">
	<igc-category-x-axis name="xAxis1" id="xAxis1" label="Label" use-clustering-mode="true" gap="1">
	</igc-category-x-axis>
	<igc-numeric-y-axis name="yAxisLeft" id="yAxisLeft" minimum-value="0" maximum-value="100">
	</igc-numeric-y-axis>
	<igc-financial-price-series name="myseries1" id="myseries1" x-axis-name="xAxis1" y-axis-name="yAxisLeft"
	  display-type="Candlestick" open-member-path="Lower" high-member-path="Max" low-member-path="Min"
	  close-member-path="Upper" thickness="3" brush="lightgreen" outline="green">
	</igc-financial-price-series>
</igc-data-chart>

const sampleData = [
    { Label: "Item A", Min: 30, Lower: 48, Median: 50, Upper: 70, Max: 82, StartX: -.25, EndX: .25 },
    { Label: "Item B", Min: 23, Lower: 35, Median: 45, Upper: 50, Max: 52, StartX: .75, EndX: 1.25 },
    { Label: "Item C", Min: 40, Lower: 52, Median: 55, Upper: 60, Max: 87, StartX: 1.75, EndX: 2.25 },
    { Label: "Item D", Min: 21, Lower: 32, Median: 50, Upper: 64, Max: 70, StartX: 2.75, EndX: 3.25 },
    { Label: "Item E", Min: 40, Lower: 60, Median: 70, Upper: 85, Max: 95, StartX: 3.75, EndX: 4.25 }
];
const chart = document.getElementById("boxWhiskerChart") as IgcDataChartComponent;
chart.dataSource = sampleData;

ロウソク足チャートはこのように表示されます。

続いて、中央値のラインと最大、最小値の地点に横線を描画するため、igc-data-annotation-line-layer を追加します。

<igc-data-chart name="boxWhiskerChart" id="boxWhiskerChart" width="550px" height="400px">
.....
	 <igc-data-annotation-line-layer name="medianLineLayer" id="medianLineLayer" brush="red" dash-array="[1]"
	  start-value-x-member-path="StartX" start-value-y-member-path="Median" end-value-x-member-path="EndX"
	  end-value-y-member-path="Median" thickness="3" annotation-label-visible="false" >
	</igc-data-annotation-line-layer>
	<igc-data-annotation-line-layer name="maxWhiskerLayer" id="maxWhiskerLayer" brush="green" dash-array="[1]"
	  start-value-x-member-path="StartX" start-value-y-member-path="Max" end-value-x-member-path="EndX"
	  end-value-y-member-path="Max" annotation-label-visible="false" thickness="3">
	</igc-data-annotation-line-layer>
	<igc-data-annotation-line-layer name="minWhiskerLayer" id="minWhiskerLayer" brush="green" dash-array="[1]"
	  start-value-x-member-path="StartX" start-value-y-member-path="Min" end-value-x-member-path="EndX"
	  end-value-y-member-path="Min" annotation-label-visible="false" thickness="3">
	</igc-data-annotation-line-layer> 
</igc-data-chart>