首页 > 解决方案 > 我想包含我的 casedata , caselabel 以形成图表

问题描述

应用程序.js

app.get("/history/:countryName", async(req , res) => { 
    const global = await api.all();
    const updated = global.updated;
    const updatedFormat = new Date(updated).toLocaleString('en-US', {timeZoneName: "short"});
    let countryName = _.lowerCase(req.params.countryName);
     countryName = countryName.toString();
    const history = await api.historical.countries({country:'China' , days: '10'});
    const historyCases = history.timeline.cases;
    const historyDeaths = history.timeline.deaths;
    const historyRecovered = history.timeline.recovered;

    for (var i in historyCases){
        caseLabel.push(i);
        caseData.push(historyCases[i]);
    }
    for (var i in historyDeaths){
        deathData.push(historyDeaths[i]);
    }
    for (var i in historyRecovered){
        recoveredData.push(historyRecovered[i]);
    }
    let  formattedCountry = countryName.toUpperCase(); 
    res.render("country", {caseData, deathData, recoveredData, caseLabel, updatedFormat, formattedCountry} );

    caseData = [];
    deathData = [];
    recoveredData = [];
    caseLabel = [];   
})

国家.ejs

<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`enter code here`
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Cases',
                    data: caseData,
                    backgroundColor: 'rgba(255, 255, 255,0.2)',
                    borderColor: '#4c92bb',
                    borderWidth: 2
                }, {
                    label: 'Deaths',
                    data: deathData,
                    backgroundColor: 'rgba(255, 255, 255,0.2)',
                    borderColor: '#de354c',
                    borderWidth: 2
                }, {
                    label: 'Recovered',
                    data: recoveredData,
                    backgroundColor: 'rgba(255, 255, 255,0.2)',
                    borderColor: '#deb135',
                    borderWidth: 2
                }
            ]
        },
    });
</script>

标签: node.jsejs

解决方案


推荐阅读