【问题标题】:Not able to convert data to ng2-chart [ Bar Chart ]无法将数据转换为 ng2-chart [条形图]
【发布时间】:2019-07-13 21:49:42
【问题描述】:

我是 Angular 新手,我正在使用 Angular 7,我需要将我的 api 数据转换为 ng2-charts 格式。

下面是我的api数据:

{
    "status": 200,
    "message": "Fetched Successfully",
    "data": [
      {
        "1": [
          {
            "productid": "5c595f1c736429312f1ee15b",
            "totalQty": 5
          },
          {
            "productid": "5c595f1c736429312f1ee158",
            "totalQty": 54
          },
          {
            "productid": "5c595f1c736429312f1ee157",
            "totalQty": 156
          }
        ],
        "2": [
          {
            "productid": "5c595e3b736429312f1ee155",
            "totalQty": 15
          },
          {
            "productid": "5c595f1c736429312f1ee157",
            "totalQty": 42
          }
        ],
        "5": [
          {
            "productid": "5c595e3b736429312f1ee155",
            "totalQty": 50
          },
          {
            "productid": "5c595f1c736429312f1ee157",
            "totalQty": 70
          }
        ],
        "12": [
          {
            "productid": "5c595e3b736429312f1ee145",
            "totalQty": 17
          },
          {
            "productid": "5c595f1c736429312f1ee157",
            "totalQty": 5
          }
        ]
      }
    ]
  }

以下是我预期的输出格式:

  public barChartLabels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; // all months 
  public barChartType = 'bar';
  public barChartLegend = true;

  public barChartData = [ 
    { data: [5], label: '5c595f1c736429312f1ee15b' },
    { data: [54], label: '5c595f1c736429312f1ee158' },
    { data: [156, 42, , , 70, , , , , , , 5], label: '5c595f1c736429312f1ee157' },
    { data: [, 15, , , 50], label: '5c595e3b736429312f1ee155' },
    { data: [, , , , , , , , , , , 17], label: '5c595e3b736429312f1ee145' },
    { data: [, 15], label: '5c595e3b736429312f1ee145' }
  ];

我想让图表动态,因为会有来自 api 的动态数据。

我尝试过使用循环,但它增加了复杂性并且需要时间,因此需要寻找一个有效的解决方案。

提前致谢

【问题讨论】:

    标签: javascript angular typescript angular7 ng2-charts


    【解决方案1】:

    您好,希望对您有所帮助:“https://github.com/valor-software/ng2-charts/issues/662” 此问题已在上面的链接中关闭。

    【讨论】:

      猜你喜欢
      • 2021-09-08
      • 1970-01-01
      • 2021-11-06
      • 2023-02-06
      • 2022-10-07
      • 2020-10-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多