在Angular 9中,你可以通过使用Plotly.js库来创建条形图和线图。要在生产构建中将默认的条形图更改为线图,你可以按照以下步骤进行操作:
npm install plotly.js
plotly.service.ts
的新服务文件。在该文件中,使用Plotly.js库来创建一个名为createLineChart()
的方法,用于创建线图。该方法接受两个参数:图表的DOM元素和图表的数据。代码如下:import { Injectable } from '@angular/core';
import * as Plotly from 'plotly.js-dist';
@Injectable({
providedIn: 'root'
})
export class PlotlyService {
constructor() { }
createLineChart(element: any, data: any[]) {
const layout = {
// 设置线图的布局配置
};
Plotly.newPlot(element, data, layout);
}
}
PlotlyService
并将其注入到构造函数中。然后,调用createLineChart()
方法来创建线图。例如,假设你的组件名为ChartComponent
,代码如下:import { Component, OnInit } from '@angular/core';
import { PlotlyService } from 'path/to/plotly.service';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
constructor(private plotlyService: PlotlyService) { }
ngOnInit() {
const element = document.getElementById('chart'); // 获取图表的DOM元素
const data = [
// 设置图表的数据
];
this.plotlyService.createLineChart(element, data);
}
}
chart.component.html
文件中:
通过按照上述步骤进行操作,你将能够在生产构建后将Plotly条形图默认更改为线图。