Question

问题的标题有点模糊，因为它难以解释所以请耐心等待。

首先，我使用Meteor构建我的应用程序，并从MongoDB获取数据。

我的MongoDB数据如下所示：

目前我的highcharts大树图仅指向数据的“BILL”类别。它工作正常并呈现图表。我的图表的代码看起来像这样（不幸的是我无法将其配置为正在运行的工作版本）：

Template.chart.onCreated(function chartOnCreated() {
  this.subscribe('someData');
});

Template.chart.onRendered(function chartOnRendered() {
  this.autorun(() => {
    if (this.subscriptionsReady()) {
      const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"}).BILL;
      var points = [],
        categoryPoints,
        categoryVal,
        categoryI = 0,
        issueTypePoints,
        issueTypeI,
        currencyPoints,
        currencyI,
        periodPoints,
        periodI,
        ECHoldingPoints,
        ECHoldingI,
        ECConcentrationPoints,
        ECConcentrationI,
        ECBPoints,
        ECBI,
        issueCountryPoints,
        issueCountryI,
        issueNamePoints,
        issueNameI,
        ISINPoints,
        ISINI,
        zeroI,
        zeroPoints,
        category,
        issueType,
        currency,
        period,
        ECHolding,
        ECConcentration,
        ECB,
        issueCountry,
        IssueName,
        ISIN,
        zero,
        mil,
        causeMil,
        causeMilI;

      for (category in data) {
        if (data.hasOwnProperty(category)) {
          categoryVal = 0;

          categoryPoints = {
            id: 'id_' + categoryI,
            name: category,
            color: Highcharts.getOptions().colors[categoryI]
          };

          issueTypeI = 0;
          for (issueType in data[category]) {
            if (data[category].hasOwnProperty(issueType)) {

              issueTypePoints = {
                id: categoryPoints.id + '_' + issueTypeI,
                name: issueType,
                parent: categoryPoints.id,
              };
              points.push(issueTypePoints);

              currencyI = 0;
              for (currency in data[category][issueType]) {
                if (data[category][issueType].hasOwnProperty(currency)) {

                  currencyPoints = {
                    id: issueTypePoints.id + '_' + currencyI,
                    name: currency,
                    parent: issueTypePoints.id
                  };
                  points.push(currencyPoints);

                  periodI = 0;
                  for (period in data[category][issueType][currency]) {
                    if (data[category][issueType][currency].hasOwnProperty(period)) {

                      periodPoints = {
                        id: currencyPoints.id + '_' + periodI,
                        name: period,
                        parent: currencyPoints.id,
                      };
                      points.push(periodPoints);

                      ECHoldingI = 0;
                      for (ECHolding in data[category][issueType][currency][period]) {
                        if (data[category][issueType][currency][period].hasOwnProperty(ECHolding)) {

                          ECHoldingPoints = {
                            id: periodPoints.id + '_' + ECHoldingI,
                            name: ECHolding,
                            parent: periodPoints.id,
                          };
                          points.push(ECHoldingPoints);

                          ECConcentrationI = 0;
                          for (ECConcentration in data[category][issueType][currency][period][ECHolding]) {
                            if (data[category][issueType][currency][period][ECHolding].hasOwnProperty(ECConcentration)) {

                              ECConcentrationPoints = {
                                id: ECHoldingPoints.id + '_' + ECConcentrationI,
                                name: ECConcentration,
                                parent: ECHoldingPoints.id,
                              };
                              points.push(ECConcentrationPoints);

                              ECBI = 0;
                              for (ECB in data[category][issueType][currency][period][ECHolding][ECConcentration]) {
                                if (data[category][issueType][currency][period][ECHolding][ECConcentration].hasOwnProperty(ECB)) {

                                  ECBPoints = {
                                    id: ECConcentrationPoints.id + '_' + ECBI,
                                    name: ECB,
                                    parent: ECConcentrationPoints.id,
                                  };
                                  points.push(ECBPoints);

                                  issueCountryI = 0;
                                  for (issueCountry in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB]) {
                                    if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB].hasOwnProperty(issueCountry)) {

                                      issueCountryPoints = {
                                        id: ECBPoints.id + '_' + issueCountryI,
                                        name: issueCountry,
                                        parent: ECBPoints.id,
                                      };
                                      points.push(issueCountryPoints);

                                      issueNameI = 0;
                                      for (issueName in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry]) {
                                        if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry].hasOwnProperty(issueName)) {

                                          issueNamePoints = {
                                            id: issueCountryPoints.id + '_' + issueNameI,
                                            name: issueName,
                                            parent: issueCountryPoints.id,
                                          };
                                          points.push(issueNamePoints);

                                          ISINI = 0;
                                          for (ISIN in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName]) {
                                            if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName].hasOwnProperty(ISIN)) {

                                              ISINPoints = {
                                                id: issueNamePoints.id + '_' + ISINI,
                                                name: ISIN,
                                                parent: issueNamePoints.id,
                                              };
                                              points.push(ISINPoints);

                                                  causeMilI = 0;
                                                  for (mil in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN]) {
                                                    if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN].hasOwnProperty(mil)) {

                                                      causeMil = {
                                                        id: ISINPoints.id + '_' + causeMilI,
                                                        name: mil,
                                                        parent: ISINPoints.id,
                                                        value: Math.round(+data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN][mil])
                                                      };
                                                      categoryVal += causeMil.value;
                                                      points.push(causeMil);
                                                      causeMilI = causeMilI + 1;
                                                    }
                                                  }

                                              ISINPoints = ISINPoints + 1;
                                            }
                                          }
                                          issueNameI = issueNameI + 1;
                                        }
                                      }
                                      issueCountryI = issueCountryI + 1;
                                    }
                                  }
                                  ECBI = ECBI + 1;
                                }
                              }
                              ECConcentrationI = ECConcentrationI + 1;
                            }
                          }
                          ECHoldingI = ECHoldingI + 1;
                        }
                      }
                      periodI = periodI + 1;
                    }
                  }
                  currencyI = currencyI + 1;
                }
              }
              issueTypeI = issueTypeI + 1;
            }
          }
          categoryPoints.value = Math.round(categoryVal / issueTypeI);
          points.push(categoryPoints);
          categoryI = categoryI + 1;
        }
      }
      Highcharts.chart('chart', {
        credits: {
        enabled: false
      },
        plotOptions: {
          series: {
            turboThreshold: 0,
            boostThreshold: 0
          }
        },
        series: [{
          type: 'treemap',
          layoutAlgorithm: 'squarified',
          allowDrillToNode: true,
          animationLimit: 1000,
          dataLabels: {
            enabled: false
          },
          levelIsConstant: false,
          levels: [{
            level: 1,
            dataLabels: {
              enabled: true,
            },
            borderWidth: 3
          }],
          data: points
        }],
        title: {
          text: ''
        },
      },
    );
    }
  });
});

<template name="chart">
  <div id="chart" style="width: 450px; height: 260px; margin: 0 auto;"></div>
</template>

Here也是图表JSFiddle的链接（但这又不是代码的工作版本）

我想要的是一个切换下拉列表，其中包含'BILL''BOND''MTN'和'NOTE'，当用户选择一个选项时，字符串在这里：

const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"}). <USERS SELECTION>;

USERS SELECTION将根据他们的选择进行更新 - 例如.BILL - 图表将呈现该数据。

有人可以帮我解决这个问题吗？

非常感谢，

Answer 1

您应该尝试const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"})["<USERS SELECTION>"];

在javascript中，您可以通过多种方式访问某个JSON对象字段的值：

var obj = { key : 'value' }
var lookup = 'key'

console.log( obj.lookup ) //undefined
console.log( obj.key ) //value
console.log( obj[lookup] ) //value

Highcharts - 使用下拉框

1 个答案: