Как интегрировать 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>

Но я получаю следующую ошибку.

То, что здесь, не решило мою проблему: Как добавить диаграммы C3 в проект angular 2+

Answer 1

Я запустил: npm install --save c3@0.4.22, чтобы исправить мою проблему, так как я уже использую d3 версии 3.

Последние версии C3 используют D3 версии 4.

Answer 2

В вас angular-cli.json добавьте следующее:

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

Очевидно, библиотека c3.js зависит от библиотеки d3.js, но последние версии c3.jsбиблиотека теперь зависит от версии 4 d3.js.

Итак, убедитесь, что у вас есть эта версия d3.js, прежде чем пытаться использовать c3.js.

В Githubрепозиторий вы найдете это:

Зависимость:

• D3.js ^ 4.12.0

Обновление:

В качестве альтернативы @BadisMerabet нашел обходной путь понижения библиотеки.Если у вас уже есть функциональные возможности, которые зависят от более старой версии d3.js, это может быть хорошим краткосрочным решением.

npm install --save c3@0.4.22