如何使用动态数据反应天然来生成JSON对象

Question

我试图将动态数据加载到我的应用程序中的融合图。我已经成功地显示了静态数据。但是，在尝试显示动态数据时，我发现，我必须创建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
            ]
          }]
        }
      };
  }