Google Charts DataTable 上的动态列数答案

【问题标题】：Dynamic number of columns on Google Charts DataTableGoogle Charts DataTable 上的动态列数
【发布时间】：2019-06-13 06:33:23
【问题描述】：

处理一些 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 对象。

【问题讨论】：

"...痛苦的其他 iffing..." 说得好。
需要 JSON 的示例，系列数据是来自 JSON 还是您只需要一个循环来生成 'series': 1: {type: 'line', tooltip: true }, ...N: {type: 'line', tooltip: true }？如果'series' 是一个数组会更容易：'series':[{ type: 'line', tooltip: true }, { type: 'line', tooltip: true }] 虽然我有一段时间没有制作 GVi，但肯定不是 100 美元。

标签： javascript arrays json google-visualization javascript-objects

【解决方案1】：

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

首先，构建默认配置对象，
然后在 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);
});

【讨论】：