Как сгенерировать JSON-объект с динамическими данными реагировать на нативные - PullRequest
Новая
       53

Как сгенерировать JSON-объект с динамическими данными реагировать на нативные

0 голосов
/ 25 февраля 2019

Я пытаюсь загрузить динамические данные в Fusion Chart в моем приложении.Я успешно отобразил со статическими данными.Но, пытаясь отобразить динамические данные, я обнаружил, что мне нужно создать объекты json для отображения полей в пользовательском интерфейсе.

Мои статические данные, которые успешно работают, выглядят следующим образом. 

const dataSource = {
  chart: {
    subcaptionFontSize: '14',
    numDivLines: ‘1’,
    yAxisMinValue: '0',
    yAxisMaxValue: '100',
    showYAxisValues: '0',
    paletteColors: ‘red’,
    useDataPlotColorForLabels: '1',
    showPercentInTooltip: '0',
    divLineAlpha: '0',
  },
  data: [
    {
      label: ‘Apple,
      value: '100'
    },
    {
      label: ‘Samsung’,
      value: '39'
    },
    {
      label: ‘LG’,
      value: '38'
    },
    {
      label: ‘RedMi’,
      value: '32'
    }
  ],
  annotations: {
    showBelow: '0',
    autoScale: '1',
    groups: [{
      id: 'user-images',
      items: [{
        id: 'dyn-label-bg',
        color: ‘green’,
        align: 'left',
        type: 'text',
        text: ‘Apple,
        x: '$canvasStartX+30’,
        y: '$dataset.0.set.0.ENDY-30'
      }, {
        id: 'dyn-label-bg',
        color: ‘green’,
        align: 'left',
        type: 'text',
        text: ‘Samsung’,
        x: '$canvasStartX+30',
        y: '$dataset.0.set.1.ENDY-30'
      }, {
        id: 'dyn-label-bg',
        color: 'green',
        align: 'left',
        type: 'text',
        text: 'LG',
        x: '$canvasStartX+30’,
        y: '$dataset.0.set.2.ENDY-30'
      },
      {
        id: 'dyn-label-bg',
        color: ‘green’,
        align: 'left',
        type: 'text',
        fontSize: 12,
        text: ‘RedMi`,
        x: '$canvasStartX+30’,
        y: '$dataset.0.set.3.ENDY-30'
      }
      ]
    }]
  }
};

И я получаю динамические данные из моего API.

Итак, это как 3 массива, 1. Названия 2. Значения 3. Индексы

И мои динамические данныеjson объекты формируются следующим образом 

     jsonTextValues = {

        label: TitlesArray, value: ValuesArray

      };


      jsonAnnotations = {

          id: 'dyn-label-bg',

          color: '#000000',

          align: 'left',

          type: 'text',

          text: TitlesArray,

          fontSize: 12,

          x: '$canvasStartX+30',

          y: `$dataset.0.set.${IndexesArray}.ENDY-30`

        }


    if (data != nil) {

      const graphData = {

        chart: {

    subcaptionFontSize: '14',
    numDivLines: ‘1’,
    yAxisMinValue: '0',
    yAxisMaxValue: '100',
    showYAxisValues: '0',
    paletteColors: ‘red’,
    useDataPlotColorForLabels: '1',
    showPercentInTooltip: '0',
    divLineAlpha: '0',

        },

        data: [

         jsonTextValues

        ],

        annotations: {

          showBelow: '0',

          autoScale: '1',

          groups: [{

            id: 'user-images',

            items: [

           jsonAnnotations

            ]

          }]

        }

      };

  }

Но, это не цикличность и ничего не показано на графике.

Есть предложения?

1 Ответ

0 голосов
/ 26 февраля 2019

Я исправил это с помощью следующего кода.Может быть, это поможет кому-то в будущем. 

  myArray.map((item, index) => {
    jsonTextValues.push({
      label: item.TextTitle, value: item.value
    });
    jsonAnnotations.push({
      id: 'dyn-label-bg',
      color: '#000000',
      align: 'left',
      type: 'text',
      text: `${item.TextTitle}`,
      fontSize: 100,
      x: '$canvasStartX+30’,
      y: `$dataset.0.set.${index}.ENDY-20`
    });
  });
}




    if (data != nil) {

      const graphData = {

        chart: {

    subcaptionFontSize: '14',
    numDivLines: ‘1’,
    yAxisMinValue: '0',
    yAxisMaxValue: '100',
    showYAxisValues: '0',
    paletteColors: ‘red’,
    useDataPlotColorForLabels: '1',
    showPercentInTooltip: '0',
    divLineAlpha: '0',

        },

        data: [

         jsonTextValues

        ],

        annotations: {

          showBelow: '0',

          autoScale: '1',

          groups: [{

            id: 'user-images',

            items: [

           jsonAnnotations

            ]

          }]

        }

      };

  }
...