下のURLでどうやってローソク足が描画されているのか調べています。
CandlestickSeriesコンポーネントがそれを担っていると思いますが、CandlestickSeries内でrenderされたGenericChartComponentにrenderが定義されていません。では、GenericChartComponentの返り値は何になるのでしょうか?
https://codesandbox.io/s/github/rrag/react-stockcharts-examples2/tree/master/examples/CandleStickChart
class CandlestickSeries extends Component {
constructor(props) {
super(props);
this.renderSVG = this.renderSVG.bind(this);
this.drawOnCanvas = this.drawOnCanvas.bind(this);
}
drawOnCanvas(ctx, moreProps) {
drawOnCanvas(ctx, this.props, moreProps);
}
renderSVG(moreProps) {
const { className, wickClassName, candleClassName } = this.props;
const { xScale, chartConfig: { yScale }, plotData, xAccessor } = moreProps;
const candleData = getCandleData(this.props, xAccessor, xScale, yScale, plotData);
return <g className={className}>
<g className={wickClassName} key="wicks">
{getWicksSVG(candleData)}
</g>
<g className={candleClassName} key="candles">
{getCandlesSVG(this.props, candleData)}
</g>
</g>;
}
render() {
const { clip } = this.props;
return <GenericChartComponent
clip={clip}
svgDraw={this.renderSVG}
canvasDraw={this.drawOnCanvas}
canvasToDraw={getAxisCanvas}
drawOn={["pan"]}
/>;
}
}
以下genericChartComponent
https://github.com/rrag/react-stockcharts/blob/master/src/lib/GenericChartComponent.js
genericChartComponentは初期化とメソッド定義のみで何も返さず終了するように見えます。