如何使用动态数据生成JSON对象本机响应

Question

我正在尝试将动态数据加载到我的应用程序中的Fusion Chart。我已成功显示静态数据。但是，在尝试显示动态数据时，我发现，我必须创建json对象来显示UI中的字段。

我成功运行的静态数据如下。

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

            ]

          }]

        }

      };

  }

但是，它没有得到循环，没有任何显示在图表中。

有什么建议？

Answer 1

我用以下代码解决了这个问题。可能它将来会帮助某人。

  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

            ]

          }]

        }

      };

  }