Angular5的Canvas JS问题

Question

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import * as CanvasJS from 'canvasjs'; @Component({ selector: 'app-canvas-js', templateUrl: './canvas-js.component.html', styleUrls: ['./canvas-js.component.scss'] }) export class CanvasJsComponent implements OnInit { canvasChartData: any; canvasChartDataCopy: number[]; canvasChart: any; canvasChartContext: any; constructor() { } ngOnInit() { let dataPoints = []; let y = 0; for ( var i = 0; i < 10000; i++ ) { y += Math.round(5 + Math.random() * (-5 - 5)); dataPoints.push({ y: y}); } let chart = new CanvasJS.Chart("canvasjsContainer", { zoomEnabled: true, animationEnabled: true, exportEnabled: true, title: { text: "Performance Demo - 10000 DataPoints" }, subtitles:[{ text: "Try Zooming and Panning" }], data: [ { type: "line", dataPoints: dataPoints }] }); chart.render(); } } 

 <div id="canvasjsContainer" style="height: 400px; width: 80%; margin: 10%;"></div> 

I tried the sample given in official website of Canvas JS with Angular5. Tried with npm install. But on build of angular application, giving build error as: | export ColumnChart from '../charts/column'; | export StackedColumnChart from '../charts/stacked_column';

Not getting how to solve this issue. Using v1.8.0 of Canvas JS.

Answer 1

CanvasJS doesn't have official npm package published yet. The package that you are using through npm is not an official one but from a third party.

You can save CanvasJS library (canvasjs.min.js) in source folder of your project ('src/app' or 'src/app/assets/js' or 'src/app/lib') and import it to your app using import * as CanvasJS from './canvasjs.min' (path may vary based on file location like './assets/js/canvasjs.min' or './lib/canvasjs.min').

Here is a sample project showing how to import CanvasJS Charts in your Angular 5 App.