Canvas JS проблема с Angular5 - PullRequest
Новая
       17

Canvas JS проблема с Angular5

0 голосов
/ 26 июня 2018 

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>

Я попробовал образец, приведенный на официальном сайте Canvas JS с Angular5.Пробовал с npm установить.Но при сборке углового приложения, выдающего ошибку сборки как: |экспортировать ColumnChart из '../charts/column';|экспортировать StackedColumnChart из '../charts/stacked_column';

Не понимаю, как решить эту проблему.Использование v1.8.0 Canvas JS.

1 Ответ

0 голосов
/ 27 июня 2018

CanvasJS еще не опубликовал официальный пакет npm.Пакет, который вы используете через npm, является не официальным, а сторонним.

Вы можете сохранить библиотеку CanvasJS (canvasjs.min.js) в исходной папке вашего проекта ('src / app' или 'src / app / assets / js' или 'src / app / lib') иимпортируйте его в свое приложение, используя import * as CanvasJS из «./canvasjs.min» (путь может отличаться в зависимости от местоположения файла, например «./assets/js/canvasjs.min» или «./lib/canvasjs.min»).

Вот пример проекта , показывающий, как импортировать диаграммы CanvasJS в приложение Angular 5.

...