Question

我正在使用类来构建图表，而与此相关的是：我需要经常从服务器返回动态标签和数据。使用此代码，我已经完成了分别在每个功能上要在控制台上打印的结果-carNames数组和avgSpeeds数组，但是通过函数drawSpeedChart绘制图表本身真的很痛苦谁能给我一种方法来获取这些打印结果以绘制图表？谢谢!!!

以下是应该呈现图表的功能：

drawSpeedChart() {
    this.labels;
    this.avgData;
    this.getAvgData()
        .then(avgData => {
            this.avgData = avgData
            console.log(this.avgData)                
            this.getCarNames()
        }).then(carNames => {
            this.carNames = carNames
            console.log(this.labels)                
        }).then(this.createChart(this.labels, this.avgData))
}

此代码段均console.log()返回undefined。

返回labels和data的主要功能分别是getCarNames和getAvgData，它们至少在控制台中显示正确的结果。问题是在那之后建立图表

这是完整的代码。

window.onload = () => { new AvgSpeedChart(); }

class AvgSpeedChart {

constructor() {
    this.selectElements()
    this.drawSpeedChart()
}

selectElements() {
    this.speedChartElement = document.querySelector('#speedChart')
}

createChart(carNames, avgData) {
    return new Chart(this.speedChartElement, {
        type: 'bar',
        data: {
            labels: carNames,
            datasets: [{
                label: "Velocidade média",
                data: avgData
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: 'Velocidade média'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            legend: {
                display: false
            }
        }         
    })
}

drawSpeedChart() {
    this.labels;
    this.avgData;
    this.getAvgData()
        .then(avgData => {
            console.log(this.avgData)                
            this.getCarNames()
            return this.avgData = avgData
        }).then(carNames => {
            console.log(this.labels)
            return this.labels = carNames                
        }).then(this.createChart(this.labels, this.avgData))
}


getCarNames() {
    return axios({
        method: 'get',
        url: "xxxxxxxxxxx",
        auth: {
            username: 'xxxxx',
            password: 'xxxxx'
        }
    }).then(response => {
        this.carNames = response.data.map(car => car.name)
        console.log(this.carNames)
        return this.carNames
    }).catch(error => {
        console.log(error)
    })
}

getAvgData() {
    return axios({
        method: 'get',
        url: "xxxxxx",
        auth: {
            username: 'xxxxx',
            password: 'xxxxx'
        }
    }).then(response => {
        this.devicesId = response.data.map(device => device.id)
        return this.devicesId          
    }).then(devicesId => {
        this.getAllSpeed(devicesId.map(e => this.getAvgSpeed(e)))
    }).catch(error => {
        console.log(error)
    })
}

getAllSpeed(arr) {
    return axios.all(arr)
        .then((avgSpeeds) => {
            console.log(avgSpeeds)
            return avgSpeeds
        })
}

getAvgSpeed(deviceId) {
    return axios({
        method: 'get',
        url: "xxxxxxx",
        auth: {
            username: 'xxxxx',
            password: 'xxxxx'
        },
        params: {
            from: '2018-10-09T00:00:00',
            to: '2018-10-09T23:59:59',
            deviceId: `${deviceId}`
        }
    }).then(response => {
        this.allSpeeds = response.data.map(pos => pos.speed)
        let sumSpeed = this.allSpeeds.reduce(this.sumSpeeds, 0)
        let numSpeed = this.allSpeeds.length === 0 ? 1 : this.allSpeeds.length 
        let avgCalc = ((sumSpeed/numSpeed)*1.852)
        return avgCalc
    }).catch(error => {
        console.log(error)
    })
}

sumSpeeds(total, sum) {
    return total + sum
}

}

Answer 1

drawSpeedChart方法的问题在于，与this一起使用的属性在您的类中不存在。我已经将它们设置为局部变量。而且您不需要第三个then，因为您已经拥有调用createChart方法的所有信息。

drawSpeedChart() {
    let avgData;
    this.getAvgData()
        .then((avgDataResponse) => {
            console.log(avgDataResponse);                
            avgData = avgDataResponse;
            return this.getCarNames();
        }).then((carNames) => {
            console.log(carNames)
            this.createChart(carNames, avgData)
        }).catch((err) => {
            console.log('Error', err);
        })
}

结帐this fiddle以查看工作示例

ChartJS-在不同的调用中从服务器返回标签和数据

1 个答案: