Javascript 显示图表-角度2

我试图在angular 2应用程序中显示图表，即折线图。但我对图表的显示方式非常陌生。我正在遵循valor软件的文档，但是我没有得到一个好的结果。我的控制台中出现错误。我已经在我的app.module.ts中导入了图表模块。对于折线图，我必须做些什么

dashboard.html

<div class="row">
  <div class="col-md-6">
    <div style="display: block;">
    <canvas baseChart width="400" height="400"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [colors]="lineChartColors"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>
    </div>
  </div>
  <div class="col-md-6" style="margin-bottom: 10px">
    <table class="table table-responsive table-condensed">
      <tr>
        <th *ngFor="let label of lineChartLabels">{{label}}</th>
      </tr>
      <tr *ngFor="let d of lineChartData">
        <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
      </tr>
    </table>
    <button (click)="randomize()">CLICK</button>
  </div>
</div>

错误

Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.1166.module.exports (addScript.js:9), <anonymous>:4:38)
    at eval (<anonymous>)
    at webpackJsonp.1166.module.exports (addScript.js:9)
    at Object.519 (chart.js?7d5f:1)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at Object.1215 (addScript.js:10)
    at __webpack_require__ (bootstrap 48f1b30…:52)
    at webpackJsonpCallback (bootstrap 48f1b30…:23)
    at scripts.bundle.js:1

未捕获引用错误：未定义require
在eval（在webpackJsonp.1166.module.exports（addScript.js:9），：4:38处进行评估）
评估时（）
在webpackJsonp.1166.module.exports上（addScript.js:9）
at Object.519（chart.js？7d5f:1）
at\uuuuu网页包\uuuuuuuuuuuuu需要（引导48f1b30…：52）
在Object.1215（addScript.js:10）
at\uuuuu网页包\uuuuuuuuuuuuu需要（引导48f1b30…：52）
在webpackJsonpCallback（引导48f1b30…：23）
在scripts.bundle.js:1

在dashboard.html中包含

将

添加到index.html文件中

---

最初，您必须安装chart.js

npm install ng2-charts chart.js --save

once it's done need to import it in your app.module.ts file
import { ChartsModule } from 'ng2-charts';
@NgModule( declarations: [],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ChartsModule,

])

这些图表取决于C3，因此也必须包括它

 npm install c3

你错过的最后一件事是，你还必须添加样式und angular.cli.json

"scripts": [
        "../node_modules/chart.js/src/chart.js"

       ],

"styles": [
    "../node_modules/c3/c3.min.css"
  ],

---

看起来您正在使用webpack，它通常会修复此问题，因为javascript客户端上没有require（），但是您的webpack.config.js文件可能有问题？你能在你的问题中发布它吗，因为我相信这将是你的问题所在，而且比我更擅长网页的人将能够找到it@BenYeomans，我的文件夹中没有任何名为webpack的文件请尝试添加到dashboard.html，或者如果第一个文件不起作用，你能在下面的文档中添加一个链接吗？虽然控制台中现在没有错误，但图表不会显示。这是文档

"styles": [
    "../node_modules/c3/c3.min.css"
  ],