如何在宣传单angular2上创建饼图标记？

Question

我想添加饼图。我在谷歌上搜索了一下，找到了像leaflet -dvf.这样的东西。我已经在使用@assymetric/angular2-leaflet和leaflet了。我尝试将leaflet-dvf集成到我的angular 2应用程序中。

我在index.html上添加了它的脚本

index.html

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.js"></script>

map.component.ts

import { MapService } from '../../map.service';
import { Component } from '@angular/core';
import { Observer } from 'rxjs/Observer';


@Component({
  moduleId: module.id,
  selector: 'map-demo',
  templateUrl: './map.component.html',
  styleUrls: ['map.component.css']
})
export class MapDemoComponent {
  mapInstance: any;
  coords: any = [];
  mapData: any;
  // Open Street Map Definition
  LAYER_OSM = {
    id: 'openstreetmap',
    name: 'Open Street Map',
    enabled: true,
    layer: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
      maxZoom: 18,
      attribution: `Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>
                    contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
                    Imagery © <a href="http://mapbox.com">Mapbox</a>`,
      mapId: 'id',
      subdomains: ['a', 'b', 'c', 'd'],
      token: 'token'
    })
  };

  // Values to bind to Leaflet Directive
  layersControlOptions = {
    position: 'bottomright'
  };
  baseLayers = {
    'Open Street Map': this.LAYER_OSM.layer
  };
  options = {
    zoom: 10,
    center: L.latLng([40.4859372, -111.8768695])
  };


  constructor() {

  onMapReady(map: L.Map) {
    this.mapInstance = map;
  }

  generateCord(data: any) {

        var circle = L.circle([item.Latitude, item.Longitude], {
          color: 'rgb(63, 61, 61)',
          fillColor: fillColor,
          fillOpacity: 0.8,
          radius: item.PRODUCTION
        }).bindTooltip(item.USER_NAME + `(${item.User_Classification}) `)
          .addTo(this.mapInstance);
        //   var marker = L.marker([item.Latitude, item.Longitude]).addTo(this.mapInstance)
        // .bindTooltip(item.USER_NAME)
        // .openTooltip();

      });
    }

  }

}

我已经安装了leaflet的打字，所以当我使用插件时，它collapse.Because都以L.MethodName开头。

var barChartMarker = new L.BarChartMarker(new L.LatLng(0, 0), options).addTo(this.mapInstance);

上面的插件不能使用声明var方法。如何为我的单张地图添加饼图标记？