角度2:组合条形图和折线图

时间:2017-06-12 07:43:37

标签: angular angular2-routing

我想在我的自定义组件中使用此github链接在角度2的仪表板中组合条形图和折线图:

https://github.com/akveo/ng2-admin

(仪表板有一个内置条形图,我试图在我的自定义组件中调用它)

我创建了一个名为barChart.component.ts

的组件

更新代码

无功/网络/ HTML / Angular2 \ NG2管理员主\ SRC \应用\页面\仪表板\ BARCHART \ barChart.component.ts

import {Component} from '@angular/core';

import { ChartistJsService } from '../../charts/components/chartistJs/chartistJs.service';
import * as Chart from 'chart.js';

@Component({
  selector: 'bar-chart',
  template: `
         <ba-chartist-chart baChartistChartClass="ct-chart"
                        baChartistChartType="Bar"
                         [baChartistChartData]="data['simpleBarData']"  
                       [baChartistChartOptions]="data['simpleBarOptions']">
          </ba-chartist-chart>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                       baChartistChartType="Line"
                       [baChartistChartData]="data['simpleLineData']"
                       [baChartistChartOptions]="data['simpleLineOptions']">
         </ba-chartist-chart>
       `
})

// TODO: move chart.js to it's own component
export class BarChart {
     public simpleBarData: {
      data:any;
      constructor(private _chartistJsService:ChartistJsService) {
   }

   ngOnInit() {
    this.data = this._chartistJsService.getAll();
    }
}

这里显示条形图和折线图(条形图下方的折线图单独与轴),但我只希望折线图在条形图上合并(没有折线图的x和y轴)。

0 个答案:

没有答案