Создание класса конструктора для создание объектов в Higchart на основе массивов данных

@Викуся96 · Регистрация: 28.08.2019

Студворк — интернет-сервис помощи студентам

Привет всем!
Нужна ваша помощь в создании управляемой диаграммы.
С помощью библиотеки Higchart, я создала круговую диаграмму.
В этой диаграмме остается статические наименования массив name1 и статические цвета.
Я создала 4 элемента input radio: Пример: <label><input type="radio" name="year" class="input-radio radio-year" value="2012"> 2012</label>
По нажатию на элемент радио выполняется функция ($(".radio-year").change(function () {}); в котором есть switch собирающий эту диаграмму.
Я написала как могла, но это очень глупый подход

Проблема будет заключаться в следующем, механизм то рабочий, что я написала.
Но я тут показала один график. А у меня должно быть три графика.
Вид у трех графиков будет одинаковый.
Но у каждого графика будет разное количество наименований, данных и цветов. То есть в одном графике больше, в другом меньше и т.д. (Все три диаграммы переключаются одной группой radio, как я показала в примере).
Если я такой подход дальше буду делать, то мой скрипт будет очень огромный!!! А массив данных жесть

Возможно есть способ как исправить такую проблему. Чтобы функция создавала из трех массивов (наименование, цвет, данные (которые выберет пользователь)) один объект.
По нажатию на radio год будет одновременно меняться сразу три графика.

Помогите, пожалуйста!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
jQuery(function ($) {
  var name1 = ["Сахар", "Мука", "Пшено", "Гречка", "Ячка", "Манка", "Молоко", "Перловка", "Макороны"];
  var dataPie2010 = [[name1[0], 87], [name1[1], 64], [name1[2], 26], [name1[3], 93], [name1[4], 34], [name1[5], 53], [name1[6], 63], [name1[7], 48], [name1[8], 33]];
  var dataPie2012 = [[name1[0], 34], [name1[1], 194], [name1[2], 199], [name1[3], 9], [name1[4], 8], [name1[5], 6], [name1[6], 5], [name1[7], 2], [name1[8], 8]];
  var dataPie2014 = [[name1[0], 91], [name1[1], 95], [name1[2], 99], [name1[3], 45], [name1[4], 49], [name1[5], 47], [name1[6], 42], [name1[7], 45], [name1[8], 48]];
  var dataPie2016 = [[name1[0], 41], [name1[1], 47], [name1[2], 49], [name1[3], 72], [name1[4], 33], [name1[5], 12], [name1[6], 46], [name1[7], 43], [name1[8], 196]];
 
  var color1 = ["Red", "Green", "blue", "Light lue", "Dark blue", "Yellow", "Pink ", "Violet ", "Black"];
 
  var chart = new Highcharts.chart("container1", {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: "pie",
    },
    title: {
      text: "Продукты",
    },
    tooltip: {
      pointFormat: "{series.name}: <b>{point.percentage:.2f}%</b>",
    },
    accessibility: {
      point: {
        valueSuffix: "%",
      },
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
          enabled: true,
          format: "<b>{point.name}</b>: {point.percentage:.2f} %",
          style: {
            color: "contrast",
            fontSize: "14px",
            fontWeight: "bold",
            textOutline: "1px 1px contrast",
          },
        },
      },
    },
  });
 
 
  $(".radio-year").change(function () {
    value = this.getAttribute("value");
    while (chart.series.length > 0) {
      chart.series[0].remove(true);
    }
    switch (value) {
      case "2010": chart.addSeries({
        name: "", innerSize: "60%", zMin: 0, colors: color1, data: dataPie2010, showInLegend: false,
      });
 
        break;
      case "2012":
        chart.addSeries({
          innerSize: "60%", zMin: 0, colors: color1, data: dataPie2012, showInLegend: false,
        });
 
        break;
      case "2014":
        chart.addSeries({
          innerSize: "60%", zMin: 0, colors: color1, data: dataPie2014, showInLegend: false,
        });
        break;
      case "2016":
        chart.addSeries({
          innerSize: "60%", zMin: 0, colors: color1, data: dataPie2016, showInLegend: false,
        });
        break;
    }
  });
  $(".radio-year").first().prop("checked", true).trigger("change");
 
});

@muxahuk1214 · 28.04.2021, 22:36

Сообщение от Викуся96

Но у каждого графика будет разное количество наименований, данных и цветов.

Сообщение от Викуся96

то мой скрипт будет очень огромный!!! А массив данных жесть

тут как бы нельзя не внести данные и ожидать, что они как-то появятся.. т.е. данные всё равно в каком-то виде должны присутствовать и от этого никуда не деться, другое дело, что мы можем "вносить" только уникальные данные, а уже потом "генерировать" нужные

JavaScript
1
2
3
const name1 = ["Сахар", "Мука", "Пшено", "Гречка", "Ячка", "Манка", "Молоко", "Перловка", "Макороны"];
const dataPie2010Values = [87, 64, 26, 93, 34, 53, 63, 48, 33];
const dataPie2010 = name1.map((name, idx) => [name, dataPie2010Values[idx]]);

далее все повторяющиеся действия (если они повторяются 1-н в один, но имеют какие-то различия в данных можно вынести в цикл, например:

Сообщение от Викуся96

var chart = new Highcharts.chart("container1", {
chart: {...

можно переделать на что-то типо

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
const charts = ['container1', 'container2', 'container3'].map((id) => {
  return  new Highcharts.chart(id, { ... });
});
// ...
$(".radio-year").change(function () {
  charts.forEach((chart) => {
     while (chart.series.length > 0) {
       chart.series[0].remove(true);
     }
     chart.addSeries(...);
  })
});

ну и в конце концов, можно придумать такую структуру данных, что бы совместить предыдущие 2 "фишки" и использовать их, что-то типо:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const datas = [
 {
    id: 'container1',
    names: ["Сахар", "Мука", "Пшено", "Гречка", "Ячка", "Манка", "Молоко", "Перловка", "Макороны"],
    colors: ["Red", "Green", "blue", "Light lue", "Dark blue", "Yellow", "Pink ", "Violet ", "Black"],
    options: {
      2010: [87, 64, 26, 93, 34, 53, 63, 48, 33],
      // 2011, 2012 и т.д.
    }
  },
  {
    id: 'container2',
    names: ["Сахар", "Мука"],
    colors: ["Red", "Green"],
    options: {
      2010: [87, 64],
      // 2011, 2012 и т.д.
    }
  }
].forEach((data) => {
  // генерируем chart и добавляем в каждый объект (меняем объект по ссылке, по этому forEach, а не map
  data.chart = new Highcharts.chart(data.id, { ... }); // используем data. для каких-то параметров, если они могут меняться
});
 
$(".radio-year").change(function () {
    const value = this.getAttribute("value");
    datas.forEach((data) => { // для каждого объекта в datas
 
      while (data.chart.series.length > 0) {
        data.chart.series[0].remove(true);
      }
      
      // data.options[value] == datas[n].options[2010] == [87, 64, 26, 93, 34, 53, 63, 48, 33]
      // data.options[value][idx] == datas[n].options[2010][2] ===  26
      const dataPie = data.names.map((name, idx) => [name, data.options[value][idx]]);
      
      data.chart.addSeries({
        innerSize: "60%", zMin: 0, colors: data.colors, data: dataPie, showInLegend: false,
      });
    });
});

как-то так.. главное найти повторяющиеся места, данные и т.п. и после этого делать "модель" данных которые можно было бы итерировать что бы получить необходимый результат

@Викуся96 · 29.04.2021, 07:29 **[ТС]**

Спасибо тебе большое, ты очень помог

Новые блоги и статьи Все статьи Все блоги /
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это дополнительная запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .

@Викуся96 1 / 1 / 0 Регистрация: 28.08.2019 Сообщений: 62
	29.04.2021, 07:29 [ТС]
	Спасибо тебе большое, ты очень помог 0

Создание класса конструктора для создание объектов в Higchart на основе массивов данных

Решение