首页 > 解决方案 > 在 c3.generate 方法上设置 data.id

问题描述

我有一个 Angular 组件,它向 API 发送请求并接收结果列表。该页面必须使用 c3 获取这些数据并生成图形。但我不熟悉该框架,我正在努力研究如何在 c3.generate 方法上指定 data.id。为了清楚起见:我有propertyName一个字符串,我想显示propertyCode它,我需要将它用作数组的每个索引的标识符,value1, value2并且value3是与该查询相关的货币值。所以,基本上,我必须将propertyCode每个数组的 id 设置为propertyName仅显示和值。下面是我的解决方案的实际代码,它不起作用,我知道为什么,我迷失在 js 上。但是,数组是这样填充的:

0:
  [[Prototype]]: Object
1: Array(1)
  0:
    propertyCode: "123"
    propertyName: "foo"    
    value1: 100    
    value2: 55
    value3: 45
  [[Prototype]]: Object
  length: 1
generateGraph(resultArray: any[]): void {
    if (resultArray.length === 0) {
      return;
    }

    let data = [{}];

    resultArray.forEach((e) => {
      data.push([{ 'propertyCode': e.propertyCode.toString(), 'propertyName': e.propertyName, 'value1': e.value1, 'value2': e.value2, 'value3': e.value3 }]);
    });

    this.graph = c3.generate({
      data: {
        json: data,
        type: 'bar',

        keys: {
          x: 'propertyCode',
          value: ['value1', 'value2', 'value3'],
        }
      },
      title: {
        text: 'Search of property code ' + resultArray[0].propertyCode
      },
      bar: {
        width: {
          ratio: 0.5
        }
      },
      legend: {
        position: 'right',
      },
      axis: {
        y: {
          tick: {
            format: function (d) { return Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(d); }
          }
        },
        x: {
          type: 'category',
        }
      }
    });

  }

标签: angularc3.js

解决方案


推荐阅读