如何将C3 Gauge Chart整合到Angular 5中？

Question

我正在尝试将C3 Gauge Chart：http://c3js.org/samples/chart_gauge.html整合到一个全新的Angular 5应用程序中。

这是我的代码chart.component.ts：

import { Component, OnInit, AfterViewInit } from '@angular/core';

import * as c3 from 'c3';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit, AfterViewInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    let chart = c3.generate({
    bindto: '#chart',
        data: {
            columns: [
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 50, 20, 10, 40, 15, 25]
            ]
        }
    });
  }

}

这是我的chart.component.html

<div id="chart"></div>

但是我收到以下错误。

按照这里的内容并没有解决我的问题：How add C3 charts to angular 2+ project

Answer 1

在你 angular-cli.json 中添加以下内容：

scripts: [
   "/path/to/d3.v4.min.js",
   "/path/to/c3.min.js"
]

显然，c3.js库取决于d3.js库，但最近版本的c3.js库现在取决于d3.js的版本4.

因此，在确定使用d3.js之前，请确保您拥有该版本的c3.js。

在Github repository中，您会发现：

依赖性：

• D3.js ^ 4.12.0

<强>更新

作为替代方案，@ BagisMerabet找到了降级库的解决方法。如果您已经拥有依赖于d3.js旧版本的功能，那么这可能是一个很好的短期解决方案。

npm install --save c3@0.4.22

Answer 2

我已经运行：npm install --save c3@0.4.22来解决我的问题，因为我已经在使用d3第3版。

最新版本的C3使用D3版本4。