示例
基本饼图
该示例显示了基本饼图，其中彩色图例和数据标签位于切片内。
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as core from '@grapecity/wijmo';
import * as chart from '@grapecity/wijmo.chart';
import { getData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let data = getData();
let sum = data.map(c => c.sales).reduce((sum, cur) => sum + cur);
let pie = new chart.FlexPie('#chart', {
header: 'Best-selling Mobile Phones Brands of 2017',
bindingName: 'brand',
binding: 'sales',
dataLabel: {
content: (ht) => {
return `${ht.name} ${core.Globalize.format(ht.value / sum, 'p2')}`;
}
},
itemsSource: data,
palette: ['rgba(42,159,214,1)', 'rgba(119,179,0,1)', 'rgba(153,51,204,1)', 'rgba(255,136,0,1)',
'rgba(204,0,0,1)', 'rgba(0,204,163,1)', 'rgba(61,109,204,1)', 'rgba(82,82,82,1)', 'rgba(0,0,0,1)']
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Basic Pie Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="chart"></div>
</div>
</body>
</html>
// best selling mobile phones brands
// https://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones
export function getData() {
return [
{ brand: 'Samsung', sales: 321 },
{ brand: 'Apple', sales: 215 },
{ brand: 'Huawei', sales: 160 },
{ brand: 'OPPO', sales: 112 },
{ brand: 'Vivo', sales: 100 },
{ brand: 'Others', sales: 638 }
];
}
body {
margin-bottom: 24px;
}
.wj-flexchart .wj-data-labels .wj-data-label {
fill: white;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wijmo from '@grapecity/wijmo';
import * as chart from '@grapecity/wijmo.chart';
//
import { Component, Inject, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjChartModule } from '@grapecity/wijmo.angular2.chart';
import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation';
import { DataService } from './app.data';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
private _sum: number;
data: any[];
//
constructor(@Inject(DataService) private dataService: DataService) {
this.data = dataService.getData();
this._sum = this.data.map(c => c.sales).reduce((sum, cur) => sum + cur);
}
//
getLabelContent = (ht: chart.HitTestInfo) => {
return wijmo.format('{name} {val:p2}', { name: ht.name, val: ht.value / this._sum });
}
}
//
@NgModule({
imports: [WjChartModule, WjChartAnimationModule, BrowserModule],
declarations: [AppComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule {
}
//
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Basic Pie Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="container-fluid">
<wj-flex-pie [header]="'Best-selling Mobile Phones Brands of 2017'" [bindingName]="'brand'" [binding]="'sales'"
[itemsSource]="data"
[palette]="['rgba(42,159,214,1)', 'rgba(119,179,0,1)', 'rgba(153,51,204,1)', 'rgba(255,136,0,1)', 'rgba(204,0,0,1)', 'rgba(0,204,163,1)', 'rgba(61,109,204,1)', 'rgba(82,82,82,1)', 'rgba(0,0,0,1)']">
<wj-flex-pie-data-label [content]="getLabelContent"></wj-flex-pie-data-label>
</wj-flex-pie>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
// best selling mobile phones brands
// https://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones
getData() {
return [
{ brand: 'Samsung', sales: 321 },
{ brand: 'Apple', sales: 215 },
{ brand: 'Huawei', sales: 160 },
{ brand: 'OPPO', sales: 112 },
{ brand: 'Vivo', sales: 100 },
{ brand: 'Others', sales: 638 }
];
}
}
body {
margin-bottom: 24px;
}
.wj-flexchart .wj-data-labels .wj-data-label {
fill: white;
}
<template>
<div class="container-fluid">
<wj-flex-pie header="Best-selling Mobile Phones Brands of 2017" bindingName="brand" binding="sales"
:itemsSource="data"
:palette="['rgba(42,159,214,1)', 'rgba(119,179,0,1)', 'rgba(153,51,204,1)', 'rgba(255,136,0,1)', 'rgba(204,0,0,1)', 'rgba(0,204,163,1)', 'rgba(61,109,204,1)', 'rgba(82,82,82,1)', 'rgba(0,0,0,1)']">
<wj-flex-pie-data-label :content="getLabelContent"></wj-flex-pie-data-label>
</wj-flex-pie>
</div>
</template>
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.chart';
import { getData } from './data';
//
new Vue({
el: '#app',
data: {
data: getData(),
sum: null
},
methods: {
getLabelContent(ht) {
return wijmo.format('{name} {val:p2}', { name: ht.name, val: ht.value / this.sum });
}
},
created() {
this.sum = this.data.map(c => c.sales).reduce((sum, cur) => sum + cur);
}
});
</script>
<style>
body {
margin-bottom: 24px;
}
.container-fluid .wj-flexchart .wj-data-labels .wj-data-label {
fill: white;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Basic Pie Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// best selling mobile phones brands
// https://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones
export function getData() {
return [
{ brand: 'Samsung', sales: 321 },
{ brand: 'Apple', sales: 215 },
{ brand: 'Huawei', sales: 160 },
{ brand: 'OPPO', sales: 112 },
{ brand: 'Vivo', sales: 100 },
{ brand: 'Others', sales: 638 }
];
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './app.css';
//
import * as React from 'react';
import * as ReactDOM from 'react-dom';
//
import * as wijmo from '@grapecity/wijmo';
import * as wjChart from '@grapecity/wijmo.react.chart';
import { getData } from './data';
//
class App extends React.Component {
constructor(props) {
super(props);
this.getLabelContent = (ht) => {
return wijmo.format('{name} {val:p2}', { name: ht.name, val: ht.value / this.state.sum });
};
let data = getData();
this.state = {
data: data,
sum: data.map(c => c.sales).reduce((sum, cur) => sum + cur),
palette: ['rgba(42,159,214,1)', 'rgba(119,179,0,1)', 'rgba(153,51,204,1)', 'rgba(255,136,0,1)', 'rgba(204,0,0,1)', 'rgba(0,204,163,1)', 'rgba(61,109,204,1)', 'rgba(82,82,82,1)', 'rgba(0,0,0,1)']
};
}
render() {
return <div className="container-fluid">
<wjChart.FlexPie header="Best-selling Mobile Phones Brands of 2017" bindingName="brand" binding="sales" itemsSource={this.state.data} palette={this.state.palette}>
<wjChart.FlexPieDataLabel content={this.getLabelContent}></wjChart.FlexPieDataLabel>
</wjChart.FlexPie>
</div>;
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AutoComplete</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
body {
margin-bottom: 24px;
}
.wj-flexchart .wj-data-labels .wj-data-label {
fill: white;
}
export function getData() {
return [
{ brand: 'Samsung', sales: 321 },
{ brand: 'Apple', sales: 215 },
{ brand: 'Huawei', sales: 160 },
{ brand: 'OPPO', sales: 112 },
{ brand: 'Vivo', sales: 100 },
{ brand: 'Others', sales: 638 }
];
}
USA - International
Japan
South
Korea