在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):FERNman/angular-google-charts开源软件地址(OpenSource Url):https://github.com/FERNman/angular-google-charts开源编程语言(OpenSource Language):TypeScript 97.8%开源软件介绍(OpenSource Introduction):Angular-Google-Charts
SetupInstallationTo use Angular-Google-Charts in your project, install the package with npm by calling npm install angular-google-charts This will add the package to your package.json and install the required dependencies. ImportingImport the import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
...
GoogleChartsModule,
...
],
...
})
export class AppModule {} This will allow you to use all of the features provided by this library. ConfiguringFor some use cases, it might be necessary to use some different config options than the default values. All config options for Angular Google Charts are provided through a config object, which
can be passed to the library by importing the Using forRootHere you will pass the options that are passed to the GoogleChartsModule.forRoot({ version: 'chart-version' }), Another example, to specify the Google Maps API key, or any other Settings: GoogleChartsModule.forRoot({ mapsApiKey: '<your Google Maps API Key here>' }), Using lazy loadingOption #1// Provide an observable through a service that fetches your chart configurations
@Injectable()
export class GoogleChartsConfigService {
private configSubject = new ReplaySubject<GoogleChartsConfig>(1);
readonly config$ = this.configSubject.asObservable();
constructor(private http: HttpClient) {}
loadLazyConfigValues(): void {
this.http.post('https://special.config.api.com/getchartsconfig', {})
.pipe(take(1))
.subscribe(config => this.configSubject.next(config));
}
}
// Factory function that provides the config$ observable from your GoogleChartsConfigService
export function googleChartsConfigFactory(configService: GoogleChartsConfigService): Observable<GoogleChartsConfig> {
return configService.config$;
}
@NgModule({
...
providers: [
GoogleChartsConfigService,
{provide: GOOGLE_CHARTS_LAZY_CONFIG, useFactory: googleChartsConfigFactory, deps: [GoogleChartsConfigService]}
]
})
export class AppModule {} Option #2// Use a global subject (whether this violates best practices in your case is up to you).
// This is just to point out a more simple way of achieving a lazy-loaded config.
export const googleChartsConfigSubject = new ReplaySubject<GoogleChartsConfig>(1);
// Call this from anywhere you want
googleChartsConfigSubject.next(config);
// Your app.module
@NgModule({
...
providers: [
{provide: GOOGLE_CHARTS_LAZY_CONFIG, useValue: googleChartsConfigSubject.asObservable()}
]
})
export class AppModule {} NOTE
ChartsThe easiest way to create a chart is using the <google-chart></google-chart> Using the component, it is possible to create every chart in the Google Charts library. It has a few important input properties, which are explained below. Type<google-chart [type]="myType"></google-chart> The type of chart you want to create. Must be of type To see examples for all chart types and more information, visit the google chart gallery. Data<google-chart [data]="myData"></google-chart> The data property expects an array of a certain shape, which depends on the chart type. Some chart types even support different data formats depending on the mode. Example with a chart that expects two-dimensional arrays: myData = [
['London', 8136000],
['New York', 8538000],
['Paris', 2244000],
['Berlin', 3470000],
['Kairo', 19500000],
...
]; The data object can also include formatters for the given data. To use these, pass an object of type Formatters can also be passed as a separate input property, see Formatters; myData = [
['London', {v: 8136000, f: '8,1360'}],
['New York', {v: 8538000, f: '8,530'}],
...
]; For further information, please see the official documentation on Columns<google-chart [columns]="chartColumns"></google-chart> The Continuing with the simple two-dimensional example: chartColumns = ['City', 'Inhabitants']; For more complex formats an array of objects can be passed. For instance, the GeoChart in markers mode expects 4 columns of type number: chartColumns = [
{ type: 'number', role: 'latitude' },
{ type: 'number', role: 'longitude' },
{ type: 'number', role: 'markerColor' },
{ type: 'number', role: 'markerSize' }
]; Title<google-chart [title]="myTitle"></google-chart> The Width<google-chart [width]="myWidth"></google-chart> The Height<google-chart [height]="myHeight"></google-chart> The Options<google-chart [options]="myOptions"></google-chart> The // example
myOptions = {
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
is3D: true
}; Formatters<google-chart [formatters]="myFormatters"></google-chart> The For more information and all formatter types, please refer to the documentation. // Formats the column with the index 1 and 3 to Date(long)
myFormatters = [
{
formatter: new google.visualization.DateFormat({ formatType: 'long' }),
colIndex: 1
},
{
formatter: new google.visualization.DateFormat({ formatType: 'long' }),
colIndex: 3
}
]; Note: When you get the error "google is not defined" whilst using the formatter in your component, you probably didn't load the google charts script. Please read the chapter on using the ScriptLoaderService. Dynamic Resize<google-chart [dynamicResize]="dynamicResize"></google-chart> The Styling<google-chart style="width: 100%;"></google-chart> Most CSS properties should work exactly as you would expect them to.
If you want to have the chart full-width for example, set the width to EventsThe ReadyThe <google-chart (ready)="onReady($event)"></google-chart> The event is of type ErrorThe <google-chart (error)="onError($event)"></google-chart> The event is of type SelectThe <google-chart (select)="onSelect($event)"></google-chart> The event of type MouseoverThe <google-chart (mouseover)="OnMouseOver($event)"></google-chart> The event is of type MouseleaveThe <google-chart (mouseleave)="onMouseLeave($event)"></google-chart> The event is of type Controls and DashboardsGoogle Charts supports combining multiple charts into dashboards and giving users controls to manipulate what data they show, see their documentation. Using this library, dashboards can be created easily. A dashboard component can be instantiated, which can contain child controls and charts. Every control must specify one or more charts they are controlling via their <dashboard [columns]="dashboardColumns" [data]="dashboardData">
<control-wrapper [for]="dashboardChart" [type]="controlFilterType" [options]="controlOptions"></control-wrapper>
<google-chart #dashboardChart type="PieChart" [width]="300" [height]="300"> </google-chart>
</dashboard> When creating dashboards, the charts themselves are not responsible for drawing, which means their Note that charts in a dashboard will not be visible if they are not referenced in at least one control. Editing ChartsGoogle Charts comes with a full-fledged chart editor, allowing users to configure charts the way they want. Angular-Google-Charts includes a component wrapping the native <!--my.component.html-->
<chart-editor></chart-editor>
<google-chart #editable></google-chart>
<button (click)="editChart(editable)">Edit</button> // my.component.ts
class MyComp {
@ViewChild(ChartEditorComponent)
public readonly editor: ChartEditorComponent;
public editChart(chart: ChartBase) {
this.editor
.editChart(chart)
.afterClosed()
.subscribe(result => {
if (result) {
// Saved
} else {
// Cancelled
}
});
}
}
Note that only one chart can be edited by a chart editor at a time. AdvancedAccessing the chart wrapper directlyI case you don't need any of the special features the <chart-wrapper [specs]="chartWrapperSpecs"></chart-wrapper> The |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论