我正在尝试使用CanvaJS构建图表并使用Handlebars进行渲染。
FETCH之后,我将自己的信息保存在名为House的const内,之后将forEach推送到费用和标签中。
const houses = data.house;
var expenses = [];
var label = [];
houses.forEach(house => {
expenses.push(house.total);
label.push(house._id);
});
当我去渲染图表时,我想在'Y:费用的值中插入,但是我想要对应的标签。 我构建它的方式无法将正确的费用值与标签匹配。
if (chartContainer) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Total Expenses"
},
data: [
{
type: "column",
dataPoints: [
{ y: expenses[0], label: "Water" },
{ y: expenses[1], label: "Wifi" },
{ y: 2, label: "Gas" },
{ y: 1, label: "Electricity" },
{ y: 0, label: "Others" }
]
}
]
});
chart.render();
}
您知道如何更改函数或数组并将值插入相应的标签吗?
**************我如何解决这个问题**************
我以前像这样用houses.map构建houseData
const houses = data.house;
let houseData = houses.map(h => {
return { y: h.total, label: h._id };
});
houseData.sort();
当我声明dataPoints时,只需获取houseData
const chartContainer = document.querySelector("#chartContainer");
if (chartContainer) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Total Expenses"
},
data: [
{
type: "column",
dataPoints: houseData
}
]
});
chart.render();
}