Question

有人可以告诉我出了什么问题吗？

我的图表没有显示，我的控制台上没有错误。

我使用此示例来使用Kendo UI Donuts图表：

https://www.telerik.com/kendo-angular-ui/components/charts/series-types/donut/

module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DataService } from '../app/app.service';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { FormsModule } from '@angular/forms';

import 'hammerjs';

@NgModule({
    imports: [BrowserModule, HttpClientModule, BrowserAnimationsModule, FormsModule, ChartsModule],
    declarations: [ AppComponent ],
    bootstrap: [AppComponent],
    providers:[DataService]
})
export class AppModule { }

component.ts

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { DataService } from '../app/app.service';
    import { ISubscription } from "rxjs/Subscription";
    import { Observable } from 'rxjs/Rx';
    import { TimerObservable } from "rxjs/observable/TimerObservable";


    @Component({
        selector: 'my-app',
        templateUrl: 'app/maPage.html',
        providers: [DataService],
        styleUrls: ['app/app.component.css']
    })

    export class AppComponent implements OnInit, OnDestroy {
     public data: any[] = [{
            kind: 'Hydroelectric', share: 0.175
        }, {
            kind: 'Nuclear', share: 0.238
        }, {
            kind: 'Coal', share: 0.118
        }, {
            kind: 'Solar', share: 0.052
        }, {
            kind: 'Wind', share: 0.225
        }, {
            kind: 'Other', share: 0.192
        }];

        public labelContent(e: any): string {
            return e.category;
        }

    }

HTML文件：

<kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
            type="donut" [data]="data"
            categoryField="kind" field="share">
          <kendo-chart-series-item-labels
            [content]="labelContent"
            color="#fff" background="none">
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-legend [visible]="false"></kendo-chart-legend>
    </kendo-chart>

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { ChartsModule } from '@progress/kendo-angular-charts';


platformBrowserDynamic().bootstrapModule(AppModule);

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Ecran</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
       <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
      <link rel="stylesheet" href="styles.css">



    <!-- Polyfill(s) for older browsers -->
    <script src="/node_modules/core-js/client/shim.min.js"></script>

    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>

    <script src="/src/systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Chargement ...</my-app>
  </body>
</html>

感谢您将来的回复。

甜甜圈图表不起作用 - Kendo UI Angular 4

0 个答案: