代码之家 › 专栏 › 技术社区 › nickj

在Angular 4应用程序中使用Morris Js插件

morris.js typescript angular

nickj · 技术社区 · 7 年前

我想在我的angular 4项目中使用Morris Js插件? 但我不知道如何将Morris chart整合到我的ng 4应用程序中。如果你有这方面的经验,请给我帮助。

2 回复 | 直到 7 年前

Dwhitz Brett Porter 7 年前

我使用与jQuery相同的方法来解决这个问题。

declare var $: any;
declare var Morris: any;
...
ngOnInit() {
   Morris.Bar({
      element: 'morris-bar',
      data: [
        {
          x: '2017 R1',
          y: 3,
          z: 2,
          a: 3,
        },
   ......
   xkey: 'X',
   kyes: ['y', 'z', 'a'],
   ...
   });
}

Pierre 6 年前

拉斐尔。应安装js( )然后添加到角度。脚本中的json。例子:

"scripts": ["./node_modules/raphael/raphael.min.js"]
npm安装morris.js06 (该fork不需要jQuery,jQuery更适合Angular4+web应用)
morris-chart.ts 和界面 morris-chart.interface.ts
src/app/app.module.ts 添加 import { MorrisChartDirective } from './directives/morris-chart/morris-chart'; MorrisChartDirective 在里面 declarations[]
在里面添加 import 'morris.js06/morris.js'; 和

公共选择; 构造函数(){ } ngOnInit(){ 这数据=[ {xkey:'2019',值:10} 这选项={ xkey:“xkey”, 标签:['value'] }; }
src/app/app.component.html 添加 <div mk-morris-js [options]='options' [data]='datas' type='Bar'></div>

仅此而已^^

this wrapper ,这是一个指令和一个界面,可以轻松地将Morris图与Angular4结合使用+

morris-chart.ts

import { Directive, AfterViewInit, OnInit, OnDestroy, Input, ElementRef, NgZone, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';

import { ChartOptions, ChartDatas } from './morris-chart.interface';

@Directive({
    selector: '[mk-morris-js]'
})
export class MorrisChartDirective implements OnInit, AfterViewInit, OnChanges, OnDestroy {
    private window: any = window;
    private _options: ChartOptions;

    public chartInstance: any;

    @Input() type = 'Line';
    @Input() options: ChartOptions;
    @Input() data: ChartDatas;
    @Output() clickChart = new EventEmitter();

    /*
    * [constructor description]
    * @method constructor
    * @param  {ElementRef} private elementRef [description]
    * @param  {NgZone}     private ngZone     [description]
    */
    constructor(
        private elementRef: ElementRef,
        private ngZone: NgZone
    ) {}

    /*
    * [ngOnInit description]
    * @method ngOnInit
    */
    ngOnInit() {
        this._options = Object.assign({}, this.options);
        this._options.element = this.elementRef.nativeElement;
        this._options.data = this.data;
    }

    /*
    * [ngAfterViewInit description]
    * @method ngAfterViewInit
    */
    ngAfterViewInit() {
        if(!this.window.Morris) {
            throw new Error('Please include node_modules/morris.js/morris.js');
        } else {
            this.ngZone.runOutsideAngular(() => {
                this.chartInstance = new this.window.Morris[this.type](this._options);
                let my_this = this;
                this.chartInstance.on('click', function(i, row) { 
                    my_this.clickChart.emit({ event, i, row });
                });
            });
        }
    }

    /*
    * [ngOnChanges description]
    * @method ngOnChanges
    * @param  {SimpleChanges} changes [description]
    */
    ngOnChanges(changes: SimpleChanges) {
        if((changes.data && !changes.data.firstChange) || (changes.options && !changes.options.firstChange)) {
            Object.assign(this.chartInstance.options, this.options);
            this.chartInstance.setData(this.data);
        }
    }

    /*
    * [ngOnDestroy description]
    * @method ngOnDestroy
    */
    ngOnDestroy() {
        if (this.chartInstance.el.empty instanceof Function) {
            this.chartInstance.el.empty();
        }
    }
}

morris-chart.interface.ts

export interface ChartData {
  label: string;
  value: number;
}

export interface ChartDatas {
    [key: string]: ChartData;
}

export interface ChartOptions {
  element: Element;
  data: ChartDatas;
  resize?: boolean;
}


export interface ChartDonutOptions extends ChartOptions {
  colors?: Array<string>;
  formater?: (y, data) => string;
  resize?: boolean;
}

export interface ChartAreaBarLineOptions {
  xkey: string,
  ykeys: Array<string>;
  labels: Array<string>;
  hideHover?: boolean|string;
  hoverCallback?: (index, options, content, row) => void;
  axes?: boolean;
  grid?: boolean;
  gridTextColor?: string;
  gridTextSize?: number;
  gridTextFamily?: string;
  gridTextWeight?: string;
  fillOpacity?: number;
}

export interface ChartAreaOptions extends ChartAreaBarLineOptions {
  behaveLikeLine?: boolean;
}

export interface ChartBarOptions extends ChartAreaBarLineOptions {
  barColors?: Array<string>;
  stacked?: boolean;
}

export interface ChartLineOptions extends ChartAreaBarLineOptions {
  lineColors?: Array<string>;
  lineWidth?: number;
  pointSize?: number;
  pointFillColors?: string;
  pointStrokeColors?: string;
  ymax?: string|number;
  ymin?: string|number;
  smooth?: boolean;
  postUnits?: string;
  preUnits?: string;
  dateFormat?: (timestamp: number) => string;
  xLabels?: string;
  xLabelFormat?: (date: Date) => string;
  xLabelAngle?: number;
  yLabelFormat?: (label: string|number) => string;
  goals?: Array<number>;
  goalStrokeWidth?: number;
  goalLineColors?: string;
  events?: Array<number>;
  eventStrokeWidth?: number;
  eventLineColors?: Array<string>;
  continuousLine?: boolean;
}