javascript - Google Charts DataTable上的动态列数

无法处理一些JavaScript对象...

我正在根据用户选择生成Google图表-有两个多重选择列表，它们创建了这样的对象:

$('option:selected', $('#slChartSettingsEntities')).each(function () {
    var el1 = $(this);
    $('option:selected', $('#slChartSettingsStats')).each(function () {
        var el2 = $(this);
        dashParms.items.push({
            entityid: el1.val(),
            statid: el2.val(),
            entityname: el1.text(),
            statname: el2.text()
        });
    });
});

我使用dashParms在图表上创建列，如下所示:

// preliminary stuff:

var seriesCount = 0; // this is what I'm trying to avoid

var data = new google.visualization.DataTable();
data.addColumn({ id: 'date', label: 'Date', type: 'date' });
data.addColumn({ id: result.companyName, label: result.companyName, type: 'number' });
if ($('#cbxEtc').is(':checked')) {
    data.addColumn({ id: 'ave', label: 'Company Average', type: 'number' });
    seriesCount++; // ...trying to avoid
}

// importantly:

for (var j = 0; j < dashParms.items.length; ++j) {
    data.addColumn({
        id: (dashParms.items[j].entityid + '#' + dashParms.items[j].statid),
        label: (dashParms.items[j].entityname + ' (' + dashParms.items[j].statname + ')'),
        type: 'number'
    });
    seriesCount++; // ...trying to avoid
}

我将dashParms传递给服务器并获取数据(C#List<List<object>>；可以详细显示此信息，但我认为不相关)，该数据用于填充图表上的行:

var jsonResult = $.parseJSON(result.chartData);

if (seriesCount == 0) {
    $.each(jsonResult, function (k, v) {
        data.addRow([
            new Date(v[0], 0, 1),
            v[1]
        ]);
    });
}
else if (seriesCount == 1) {
    $.each(jsonResult, function (k, v) {
        data.addRow([
            new Date(v[0], 0, 1),
            v[1],
            v[2]
        ]);
    });
}
else if (seriesCount == 2) {
    $.each(jsonResult, function (k, v) {
        data.addRow([
            new Date(v[0], 0, 1),
            v[1],
            v[2],
            v[3]
        ]);
    });
}
else if (seriesCount == 3) {
    // etc etc etc
}

我对图表配置对象执行相同操作:

if (seriesCount == 0) {
    chartcfg = {
        'chartType': 'ComboChart',
        'options': {
            'seriesType': 'bars'
        }
    };
}
else if (seriesCount == 1) {
    chartcfg = {
        'chartType': 'ComboChart',
        'options': {
            'seriesType': 'bars',
            'series': {
                1: { type: 'line', tooltip: true }
            }
        }
    };
}
else if (seriesCount == 2) {
    chartcfg = {
        'chartType': 'ComboChart',
        'options': {
            'seriesType': 'bars',
            'series': {
                1: { type: 'line', tooltip: true },
                2: { type: 'line', tooltip: true }
            }
        }
    };
}
else if (seriesCount == 3) {
    // etc etc etc
}

我该如何重构和动态创建这些对象，以避免痛苦地烦恼直到30呢？我意识到这里有两个问题-1)如何创建用于data.addRow()的数组，2)如何创建chartcfg JSON对象。

最佳答案

您可以在同一循环中添加行并构建系列选项，
使用值数组在系列上循环。

首先，构建默认的配置对象，
然后在json和value数组上循环...

var chartcfg = {
  chartType: 'ComboChart',
  options: {
    seriesType: 'bars',
    series: {}
  }
};

$.each(jsonResult, function (k, v) {
  var row = [];
  $.each(v, function (index, value) {
    if (index === 0) {
      row.push(new Date(value, 0, 1));
    } else {
      row.push(value);
      chartcfg.options.series[index] = {
        type: 'line',
        tooltip: true
      };
    }
  });
  data.addRow(row);
});