如何将回调中的dataset变量传入Handlebars模板供Chart.js使用

步骤1：修改接口请求函数，把dataset通过回调返回 #

你原来的call_some_api里只把完整接口数据传给了回调，没有把你处理好的dataset传出去，首先修改这部分：

function call_some_api(getData){
    request('https://someUrl..........',{json:true},(err,res,data) => {
        if (err) {
            console.log(err);
            // 错误场景也可以传空值避免逻辑卡住
            return getData([], []);
        }     
        if (res.statusCode === 200){
             var dataset = [];
             data.forEach((value, key)=>{
                dataset.push(value.close);
             });                
             // 同时传完整数据和处理好的dataset
             getData(data, dataset);     
        }
    });
};

步骤2：修改路由代码，把dataset传入模板渲染参数 #

在路由层接收回调返回的dataset，加到res.render的参数里：

app.get('/chart',function(req,res){
    call_some_api(function(getAPI_data, dataset){
        res.render('chart',{
            dataChart: getAPI_data,
            // 新增dataset字段传给模板
            dataset: dataset
        });
    });
});

步骤3：修改Handlebars模板，注入dataset变量到JS上下文 #

模板里直接写dataset是读不到后端传入的模板变量的，你需要把模板变量转成JS可识别的数组，注意要用三个大括号{{{}}}避免HTML转义破坏JSON结构：

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

<script>
// 新增这行，把后端传入的模板变量转成JS数组
const dataset = {{{JSON.stringify(dataset)}}};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Jan', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: dataset,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                stacked: true
            }
        }
    }
});
</script>

内容的提问来源于stack exchange，提问作者Lia Honey