如何将C3 Gauge Chart整合到Angular5中？

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>

但是我收到以下错误。

遵循此处的内容并没有解决我的问题：

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 版。

因此，在尝试使用 c3.js.

之前，请确保您拥有该版本的 d3.js

在 Github repository 你会发现这个：

依赖性：

D3.js^4.12.0

更新：

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

npm install --save c3@0.4.22

Answer 2

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

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

如何将C3 Gauge Chart整合到Angular5中？

How to integrate C3 Gauge Chart into Angular 5?

javascript

c3.js

angular