Прокручивать каждое свойство объекта для диаграмм с накоплением столбцов - PullRequest
Новая
       6

Прокручивать каждое свойство объекта для диаграмм с накоплением столбцов

0 голосов
/ 03 июня 2018

Привет! Я использую ajax для получения данных php mysql и отображения их в диаграммах с накоплением столбцов, но, поскольку я работаю с диаграммами с накоплением столбцов, мне нужно определить каждое поле заголовка и значения по отдельности для создания каждой серии диаграммы.

Вот мой jsfiddle: http://jsfiddle.net/o7cm6nkh/

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

{
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText": "[[title]]<br>" + "[[value]]",



    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "MAN",
    "type": "column",
    "color": "#000000",
    "valueField": "MAN"
  }, {
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText":"[[title]]<br>" + "[[value]]",


    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "PAN",
    "type": "column",
    "color": "#000000",
    "valueField": "PAN"
  },
  {
    "numberFormatter": {
            "precision": 2,
            "decimalSeparator": ".",
            "thousandsSeparator": ","
        },
    "fillAlphas": 0.8,
    "labelText":"[[title]]<br>" + "[[value]]",


    "labelPosition": "middle",
    "lineAlpha": 0.3,
    "title": "DAV",
    "type": "column",
    "color": "#000000",
    "valueField": "DAV"
  }

1 Ответ

0 голосов
/ 03 июня 2018

Вы можете определить шаблон, который имеет все требуемые свойства настройки графика, которые не изменяются, а затем динамически создавать массив графиков, используя другие свойства в ваших данных, и настраивать другие поля по мере необходимости.Так как вы, скорее всего, будете знать, что ваш categoryField будет авансом, вы можете просто перебрать остальные свойства в первом элементе массива вашего ответа и установить заголовок и valueField, так как это единственные значения, которые меняются.

Предполагая, что ваш categoryField всегда name: 

  var graphs = Object.keys(response[0]).reduce(function(graphsArray, key) {
    if (key !== "name") {
      graphsArray.push({
        "fillAlphas": 0.8,
        "labelText": "[[title]]<br>" + "[[value]]",
        "labelPosition": "middle",
        "lineAlpha": 0.3,
        "title": key,
        "type": "column",
        "color": "#000000",
        //"showAllValueLabels": true,
        "valueField": key
      });
    }
    return graphsArray;
  }, []);


  // ...
  var AmCharts.makeChart("chartdiv", {
    // ...
    "graphs": graphs,
    // ...
  });

(обратите внимание, что numberFormatter не является свойством уровня графа, а свойством объекта диаграммы верхнего уровня)

Обновленная скрипка: http://jsfiddle.net/o7cm6nkh/2/

...