Динамическое количество столбцов в Google Charts DataTable

Возникли проблемы с обработкой некоторых объектов JavaScript...

Я создаю Google Chart на основе выбора пользователя - есть два списка с множественным выбором, которые создают такой объект:

$('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..." хорошо сказано.
zer00ne 13.06.2019 10:34

Нужен пример JSON, данные серии поступают из JSON или вам просто нужен цикл для генерации 'series': 1: {type: 'line', tooltip: true }, ...N: {type: 'line', tooltip: true }? Было бы проще, если бы 'series' был массивом: 'series':[{ type: 'line', tooltip: true }, { type: 'line', tooltip: true }] Не уверен на 100$, хотя я некоторое время не делал GVis.

zer00ne 13.06.2019 10:57
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы можете добавить строки и построить вариант серии в том же цикле,
используйте массив значений для цикла в серии.

сначала создайте объект конфигурации по умолчанию,
затем зациклите массив json и значений...

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);
});

Другие вопросы по теме

Похожие вопросы

Добавить горизонтальную линию после нажатия кнопки клонирования таблицы
Отправка изображения с помощью axios в Node.js и дальнейшее его использование
Функция Reactjs не возвращает несколько значений должным образом: TypeError: undefined не является итерируемым (невозможно прочитать свойство Symbol (Symbol.iterator))
Изображения в компоненте Vue при использовании Webpack Encore
Обратный вызов не обновляет состояние
Загружать видео последовательно одно за другим в Node JS, используя асинхронность?
Как добавить цветовой градиент к логотипу Instagram, не влияя на видимость?
Как найти индекс выделенного текста в getSelection() с помощью javascript?
У меня есть массив объектов, внутри каждого объекта есть ключ, называемый баллами, и мне нужно найти сумму каждого балла и поместить его в массив
Как я могу получить значение из константы, используя ключ из другого класса js n react-native?