4

chartjs-chart-financial「ローソク足」チャートをプロットするために使用したいと思います。ただし、chartjs-chart-financialまだ npm に公開されていません。https://github.com/chartjs/chartjs-chart-financialから複製されたレポがあるディレクトリで、npm installを実行します。ビルド後、フォルダーにchartjs-chart-financial.js が表示されます。ただし、これを基本ライブラリと統合する方法についてはわかりません。そのため、チャートで a を指定できます。これが実証されている例に出くわすことができませんでした..gulp builddistchart.jstype: candlestick

Reactで作業しているので、現在react-chartjs-2ラッパーとして使用しています:chart.js

import React, { Component } from 'react';
import Chart from '../node_modules/chart.js/dist/chart';

class Financial extends Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }

    componentDidMount() {
        const ctx = this.myRef.current;
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["A", "B", "C"],
                datasets: [{
                    label: 'Test',
                    data: [12, 20, 15],
                    backgroundColor: 'gray'
                }]
            }
        });
    }
    
    render() {
        return (
            <canvas ref={this.myRef}/>
        );
    }
}

export default Financial;

ご覧のとおりbar、今のところ、タイプ付きのサンプル チャートをレンダリングしています。代わりに、関連するデータセットとともに「ローソク足」タイプを使用できるようにしたいと考えています。

助けていただければ幸いです!!

4

0 に答える 0