插入图表值和带有相应值的标签

时间:2020-01-22 20:43:21

标签: javascript arrays node.js mongodb handlebars.js

我正在尝试使用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);
      });

这是我在foreach之后得到的结果 Result ForEach

当我去渲染图表时,我想在'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();
      }

0 个答案:

没有答案