angular - 具有多个系列+堆叠的角度剑道条形图

Question

我正在尝试在 Kendo Angular 中实现堆栈条形图。我想要实现的是“实际”与“预测”比较数据。我尽力创建堆叠但无法获得多个系列栏。我想要实现的是下面类似的东西。

我希望相同的类别出现在单个条形系列中，例如“MonthBudget+MonthActual”、“AnnualBudget+AnnualActual”

我的数据源是：

public detailBar = [
{
  service: 'First',
  type: 'MonthlyBudget',
  subcategory: 'a',
  value: 18666555.79
},
{
  service: 'First',
  type: 'MonthlyActual',
  value: 10350000,
  color: '#fbff15'
},
{ service: 'First', type: 'AnnualBudget', value: 1350000 },
{
  service: 'First',
  type: 'AnnualActual',
  value: 2350000,
  color: '#fbff15'
},
{ service: 'First', type: 'YTDBudget', value: 1350000 },
{ service: 'First', type: 'YTDActual', value: 2350000, color: '#fbff15' },

{ service: 'Second', type: 'MonthlyActual', value: 18666555.79 },
{
  service: 'Second',
  type: 'MonthlyBudget',
  value: 10350000,
  color: '#fbff15'
},
{ service: 'Second', type: 'AnnualBudget', value: 1350000 },
{
  service: 'Second',
  type: 'AnnualActual',
  value: 2350000,
  color: '#fbff15'
},
{ service: 'Second', type: 'YTDBudget', value: 1350000 },
{ service: 'Second', type: 'YTDActual', value: 2350000, color: '#fbff15' },

{ service: 'Third', type: 'MonthlyActual', value: 18666555.79 },
{
  service: 'Third',
  type: 'MonthlyBudget',
  value: 10350000,
  color: '#fbff15'
},
{ service: 'Third', type: 'AnnualBudget', value: 1350000 },
{
  service: 'Third',
  type: 'AnnualActual',
  value: 2350000,
  color: '#fbff15'
},
{ service: 'Third', type: 'YTDBudget', value: 1350000 },
{ service: 'Third', type: 'YTDActual', value: 2350000, color: '#fbff15' }

];

我目前的状态在这里：https ://stackblitz.com/edit/angular-kendo-graphs-m7n1xn?file=src/app/app.component.ts

标签： angularkendo-uikendo-ui-angular2