如何将chartjs-chart-financial与chart js集成

67up9zun  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(104)

我想使用chartjs-chart-financial来绘制一个“烛台”图表。但是,chartjs-chart-financial还没有发布到npm。我在https://github.com/chartjs/chartjs-chart-financial的克隆存储库目录中运行npm install,然后运行gulp build。构建后,我在dist文件夹中看到chartjs-chart-financial.js。然而,我不知道如何将它与基本的chart.js库集成,这样我就可以在我的Chart上指定一个type: candlestick
我目前使用react-chartjs-2作为chart.js的 Package 器,因为我在React中工作:

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类型的示例图表。我希望能够使用“candlestick”类型,沿着其关联的数据集。
我会感激任何帮助!!

ljo96ir5

ljo96ir51#

你可以在没有NPM仓库的应用中使用这个包。只需要在你的package.json中使用这个简单的“技巧”:

"dependencies": {
    "chartjs-chart-financial": "github:chartjs/chartjs-chart-financial"
  }

字符集

**重要提示:**GitHub仓库必须有package.json文件!

相关问题