如何使用Chart.js绘制混合的财务/烛台和条形图？

w1jd8yoj 于 2022-12-26 发布在 Chart.js

关注(0)|答案(3)|浏览(187)

我正试着把蜡烛图（代表股票数据）和条形图（代表成交量）结合起来。
我已经将它们显示在一个图表上，但显示和布局我有麻烦。

首先，蜡烛图和条形图数据并排放置，而不是堆叠在彼此的顶部。另一个错误是条形图的数量数据的比例在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是一个数组，包含表示每个项目条目的数量的数字

我应该添加什么，使烛台和酒吧放置在同一列，以及有酒吧有自己的比例，使他们不会超过图表的高度？

chart.js

来源：https://stackoverflow.com/questions/58713399/how-to-use-chart-js-to-draw-mixed-financial-candlestick-and-bar-chart

3条答案

按热度按时间

bjg7j2ky1#

看起来你需要缩放体积数据因为它是两个不同的Y值单位，

赞(0）回复(0）举报 2022-12-26

ql3eal8s2#

看起来chartJs中目前不支持此功能我创建了一个功能请求，请单击链接查看由于此问题而关闭的两个问题。
https://github.com/apexcharts/apexcharts.js/issues/2068

赞(0）回复(0）举报 2022-12-26

ippsafx73#

使用默认配置，你不容易添加条形图。下面是你需要做的步骤;
基本配置：

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
                },
            ]

结果;

赞(0）回复(0）举报 2022-12-26

我来回答

如何使用Chart.js绘制混合的财务/烛台和条形图？

3条答案

相关问题

热门标签

最新问答