0

下の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は初期化とメソッド定義のみで何も返さず終了するように見えます。

1 件の回答 1

0

genericChartComponentの定義を見ると、

class GenericChartComponent extends GenericComponent {
    ....
}

となっています。このextends GenericComponentというのは、GenericChartComponentクラスはGenericComponent継承するクラスであるという宣言です。

よって、GenericChartComponentクラスは自身で宣言したメソッドの他に、GenericComponentで宣言されているメソッドを持っています。

GenericComponentの定義を見てみると378行目にrenderが定義されていますから、GenericChartComponentもこのrenderを使用して描画されることになります。

1
  • ありがとうございます。は避けてくださいとあるのですが、お礼を言うところがわからないのでこちらから失礼します。クラスに慣れていないので助かりました。ありがとうございました。
    – bafcom
    Commented 2019年3月30日 6:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。