logo标签列表

如何使用Chart.js绘制混合金融/蜡烛和条形图？

chartschart.jsbar-chartcandlestick-chartcombinedchart
3
我正在尝试制作一个蜡烛图（代表股票数据）和一个条形图（代表交易量）的组合图表。
我已经将它们显示在一个图表上，但是我在显示和布局方面遇到了问题。

enter image description here

首先，蜡烛图和条形图数据并排放置，而不是堆叠在一起。另一个错误是条形图的成交量数据比例没有正确地表示在y轴上（使用蜡烛图数据作为基础）。
以下是我目前用于呈现图表的代码：
chart = new Chart(ctx, {
    type: 'candlestick',
    data: {
        labels: labelsData,
        datasets: [{
            label: "My Data",
            data: chartData
        },
        {
            label: 'Volume',
            data: volData,
            type: 'bar'
        }]

    }
});
labelsData包含每个条目的日期值。 chartData包含JSON对象，其中c，h，l，o，t（关闭，高，低，开，日期）表示每个条目的股票数据。 volData是一个包含数字的数组，表示每个条目的交易量。
要使蜡烛图和柱形图放置在同一列中，并使柱形图具有自己的比例尺，以便它们不会超过图表的高度，您需要添加以下内容：
1. 在绘制蜡烛图时，将柱形图的高度设置为相应的数值。 2. 创建一个单独的y轴来显示柱形图的比例尺。 3. 将柱形图与蜡烛图对齐，使它们在同一列中。
3个回答
1

使用默认配置，您无法轻松添加条形图。 以下是您需要执行的步骤：

基本配置：

    const config = {
            // type: 'candlestick', // you must remove this, this option is braking the chart
            data: {
                datasets: []
            },
            options: {
                parsing: false, // must be here, solves another stupid problem
                spanGaps: true, // for better performance
                animation: false, // for better performance
                pointRadius: 0, // for better performance
                plugins: {
                    title: {
                        display: false,
                        text: 'Fiyat Grafiği'
                    },
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'timeseries',
                    },
                    y: {
                        type: 'linear',
                    },
                    volume: {
                        type: 'linear',
                        beginAtZero: true,
                        position: 'right',
                        max: maxVolume * 10, // maxVolume should be the maximum number of volumes
                        grid: {
                            display: false, // for better presentation
                        },
                        ticks: {
                            display: false, // for better presentation
                        },
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
            }
        };

第二步是准备数据集；

    let dataSets = [
                {
                    type: 'candlestick', // this must stay
                    label: 'Financial Graph',
                    data: data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']),
                            'o': kline['open_price'],
                            'c': kline['close_price'],
                            'h': kline['high_price'],
                            'l': kline['low_price']
                        };
                    }),
                    color: {
                        up: 'rgb(26, 152, 129)', // those colors are better than defaults
                        down: 'rgb(239, 57, 74)', // those colors are better than defaults
                        unchanged: '#999', // those colors are better than defaults
                    },
                    borderColor: {
                        up: 'rgb(26, 152, 129)',
                        down: 'rgb(239, 57, 74)',
                        unchanged: '#999',
                    },
                    order: 10,
                    yAxisID: 'y', // this must stay
                },
                {
                    type: 'bar',
                    label: 'Volume',
                    data: data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']), // i used moment, feel free to use your own time library
                            'y': kline.quote_asset_volume,
                        }
                    }),
                    backgroundColor: data['klines'].map(function (kline) {
                        return kline.open_price < kline.close_price ? 'rgb(26, 152, 129)' : 'rgb(239, 57, 74)' // for better presentation
                    }),
                    borderColor: '#fff',
                    borderWidth: 1,
                    order: 12,
                    yAxisID: 'volume', // this must stay
                    barPercentage: 0.5, // this must stay
                    barThickness: 6, // this must stay
                    maxBarThickness: 8, // this must stay
                },
            ]

结果;

candlestick chart

0

看起来你需要对音量数据进行缩放，因为Y轴上的值单位不同。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接