ngx-charts垂直分组条形图,条形与相同类型的数据集重叠

时间:2019-07-08 12:37:17

标签: angular ngx-charts

使用角度图和ngx图并尝试显示以下数据集的图表时,垂直条重叠并且显示单个条。

this.multi = [
  {
    "name": "HGB001",
    "series": [
      {
        "name": "Discrepancy",
        "value": 8
      },
      {
        "name": "Discrepancy",
        "value": 8
      }
      {
        "name": "Pending",
        "value": 4
      }
    ]
  },

  {
    "name": "HGB002",
    "series": [
      {
        "name": "Discrepancy",
        "value": 8
      },
      {
        "name": "Not Started",
        "value": 1
      },
      {
        "name": "Not Started",
        "value": 1
      }
    ]
  }
];

尝试减小barPadding和groupPadding参数的大小

  <ngx-charts-bar-vertical-2d [results]="multi" [xAxis]="l('SubjectCode')" 
                                            [yAxis] ="l('Status')" [gradient]="true" [legend]="false" [tooltipDisabled]="false" 
                                            [scheme]="SubjectVisitStatisticsDataTable.scheme">
                                            <ng-template #tooltipTemplate let-model="model">
                                                <!-- fields are series/name/value -->
                                                <div class="tt">
                                                    {{ model.name}}
                                                    <br> {{ model.lable }}
                                                </div>
                                            </ng-template>
                                        </ngx-charts-bar-vertical-2d>

在拥有这种数据集的同时需要在图表上获得三个不同的柱形图

0 个答案:

没有答案