Chart.js Financial Candlestick 图表坐标轴正常但主体图形不显示

核心错误点 #

你提供的代码存在3个直接导致蜡烛图无法渲染的问题：

• 缺失getRandomData函数实现：代码中调用该函数生成渲染数据源barData，但仅实现了单根蜡烛数据生成逻辑randomBar，没有批量生成数据的逻辑，导致数据源为空
• 未引入蜡烛图支持依赖：原生Chart.js不自带candlestick图表类型，需要额外引入chartjs-chart-financial插件才能支持该类型的渲染
• 代码执行顺序错误：你在初始化图表、调用getRandomData方法之后才定义各类工具函数，JS执行时会触发未定义报错，打断渲染流程

修复步骤 #

1. 引入对应依赖：你可以通过npm安装chart.js和chartjs-chart-financial，也可以引入对应公开静态资源，注意版本匹配：Chart.js 4.x对应0.2.x版本的chartjs-chart-financial，Chart.js 3.x对应0.1.x版本的插件，若使用时间轴还需要配套引入时间适配器。
2. 补全批量数据生成逻辑，调整代码执行顺序：

// 优先定义所有工具方法
var getRandomInt = function(max) {
    return Math.floor(Math.random() * Math.floor(max));
};

function randomNumber(min, max) {
    return Math.random() * (max - min) + min;
}

function randomBar(date, lastClose) {
    var open = +randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);
    var close = +randomNumber(open * 0.95, open * 1.05).toFixed(2);
    var high = +randomNumber(Math.max(open, close), Math.max(open, close) * 1.1).toFixed(2);
    var low = +randomNumber(Math.min(open, close) * 0.9, Math.min(open, close)).toFixed(2);
    return {
        x: date.valueOf(),
        o: open,
        h: high,
        l: low,
        c: close
    };
}

// 补全缺失的getRandomData方法
function getRandomData(startDateStr, count) {
    let date = new Date(startDateStr);
    let data = [];
    let lastClose = 100; // 初始基准收盘价可自行调整
    for (let i = 0; i < count; i++) {
        const bar = randomBar(date, lastClose);
        data.push(bar);
        lastClose = bar.c;
        // 每次迭代日期向后推1天，可根据需求调整时间间隔
        date.setDate(date.getDate() + 1);
    }
    return data;
}

// 最后执行图表初始化逻辑
var barCount = 5;
var initialDateStr = '01 Apr 2017 00:00 Z';
var barData = getRandomData(initialDateStr, barCount);
// 注意此处ctx为页面canvas元素的2D上下文，需要提前获取：const ctx = document.getElementById('目标canvas元素id').getContext('2d');
var chart = new Chart(ctx, {
    type: 'candlestick',
    data: {
        datasets: [{
            label: 'CHRT - Chart.js Corporation',
            data: barData
        }]
    },
    // 可显式指定x轴为时间轴，避免自动识别异常
    options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'day'
                }
            }
        }
    }
});

3. 确保页面上存在对应的canvas元素用于渲染图表，示例如下：

<canvas id="myChart" width="800" height="400"></canvas>

内容的提问来源于stack exchange，提问作者Silvia Francia