如何将 C3 Gauge Chart 集成到 Angular 5 中？答案

【问题标题】：How to integrate C3 Gauge Chart into Angular 5?如何将 C3 Gauge Chart 集成到 Angular 5 中？
【发布时间】：2018-04-24 13:23:25
【问题描述】：

我正在尝试将 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

【问题讨论】：

Please don't put tags in question titles

标签： javascript angular c3.js

【解决方案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。

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

在Github repository 你会发现这个：

依赖：

D3.js ^4.12.0

更新：

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

npm install --save c3@0.4.22

【讨论】：

我没有在脚本中添加任何内容。将 d3 升级到版本 4 解决了我的问题。谢谢！
@BadisMerabet 太棒了！我很高兴！玩得开心c3.js！ :D
现在我的 ng2-nvd3 图表坏了 :) 因为它们依赖于 d3 v3 : github.com/krispo/ng2-nvd3 。我会看看我是否会创建另一个问题。
如果您在使用该软件包时遇到问题，请直接使用库而不是软件包。或者打开一个新问题，让我们看看如何解决这个问题！ :D
我用的是C3的降级版本

【解决方案2】：

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

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

【讨论】：