デモ
凡例とタイトル
header、footer、および軸のtitleのプロパティを使用して、チャートにタイトルを追加します。
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjCore from '@grapecity/wijmo';
import * as wjChart from '@grapecity/wijmo.chart';
import * as wjInput from '@grapecity/wijmo.input';
import { getData, getComboData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create a chart
let theChart = new wjChart.FlexChart('#theChart', {
itemsSource: getData(),
bindingX: 'country',
legend: { position: 'Right' },
series: [
{ binding: 'sales', name: '売上' },
{ binding: 'expenses', name: '費用' },
{ binding: 'downloads', name: 'DL数' }
]
});
theChart.palette = getRandomPalette();
// toggle custom styles
document.getElementById('customTitles').addEventListener('click', function (e) {
wjCore.toggleClass(theChart.hostElement, 'custom-titles', e.target.checked);
});
// toggle custom legend styles
document.getElementById('customLegend').addEventListener('click', function (e) {
wjCore.toggleClass(theChart.hostElement, 'custom-legend', e.target.checked);
});
// change legend position
var legendPosition = new wjInput.ComboBox('#legendPosition', {
itemsSource: getComboData(),
textChanged: function (s, e) {
theChart.legend.position = s.selectedIndex;
},
text: '左'
});
//
// customize chart titles
let header = new wjInput.ComboBox('#header', {
textChanged: (s) => theChart.header = s.text
});
let footer = new wjInput.ComboBox('#footer', {
textChanged: (s) => theChart.footer = s.text
});
let xTitle = new wjInput.ComboBox('#xTitle', {
textChanged: (s) => theChart.axisX.title = s.text
});
let yTitle = new wjInput.ComboBox('#yTitle', {
textChanged: (s) => theChart.axisY.title = s.text
});
//
// initialize titles
header.text = '各国の実績';
footer.text = 'powered by Wijmo';
xTitle.text = '国';
yTitle.text = '金額／数';
}
//
function getRandomPalette() {
let palettes = Object.getOwnPropertyNames(wjChart.Palettes)
.filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype');
let rand = Math.floor(Math.random() * palettes.length);
//
return wjChart.Palettes[palettes[rand]];
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Legends and Titles</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">
<label for="header">ヘッダー: </label>
<div id="header"></div><br>
<label for="footer">フッター: </label>
<div id="footer"></div><br>
<label for="xTitle">X軸タイトル: </label>
<div id="xTitle"></div><br>
<label for="yTitle">Y軸タイトル: </label>
<div id="yTitle"></div>
<div>
<label for="customTitles">カスタムタイトル: </label>
<input id="customTitles" type="checkbox" checked="true">
</div>
<div>
<label for="customLegend">カスタム凡例: </label>
<input id="customLegend" type="checkbox" checked="true">
</div>
<label for="legendPosition">凡例の位置: </label>
<div id="legendPosition"></div>
<div class="custom-titles custom-legend" id="theChart"></div>
</div>
</body>
</html>
// create some random data
export function getData() {
let countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','), data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000)
});
}
//
return data;
}
//
export function getComboData() {
return 'なし,左,上,右,下'.split(',');
}
.wj-flexchart {
height: 300px;
}
label {
width: 150px;
text-align: right;
}
.wj-control {
margin-bottom: 3px;
}
/* custom color for all titles */
.custom-titles.wj-flexchart .wj-title {
fill: #42357C;
}
/* custom size/weight for header */
.custom-titles.wj-flexchart .wj-header .wj-title {
font-size: 120%;
font-weight: bold;
}
/* custom size/weight for footer */
.custom-titles.wj-flexchart .wj-footer .wj-title {
font-size: 90%;
font-weight: bold;
}
/* custom style for axis-x/y titles */
.custom-titles.wj-flexchart .wj-axis-x .wj-title,
.custom-titles.wj-flexchart .wj-axis-y .wj-title{
font-size: 75%;
font-style: normal;
opacity: .5;
}
.wj-flexchart .wj-legend .wj-label {
opacity: .9;
font-size: 80%;
}
/* custom color for legend box */
.custom-legend.wj-flexchart .wj-legend > rect {
fill: #003000;
}
/* custom color for legend labels */
.custom-legend.wj-flexchart .wj-legend .wj-label {
fill: white;
font-style: italic;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Component, Inject, enableProdMode, NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { WjChartModule } from '@grapecity/wijmo.angular2.chart';
import { DataService } from './app.data';
import * as wjChart from '@grapecity/wijmo.chart';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
data: any[];
positionData: any[]
header: string;
footer: string;
xTitle: string;
yTitle: string;
palette: any;
customTitles: boolean;
customLegend: boolean;
legendPosition: string;
//
constructor(@Inject(DataService) private dataService: DataService) {
this.data = dataService.getData();
this.positionData = dataService.getComboData();
this.header = "各国の実績";
this.footer = "powered by Wijmo";
this.xTitle = "国";
this.yTitle = "金額／数";
this.customTitles = true;
this.customLegend = true;
this.legendPosition = 'Left';
this.palette = this.getRandomPalette();
/**
*
xTitle.text = 'country';
yTitle.text = 'values/units';
*/
}
//
getRandomPalette() {
let palettes = Object.getOwnPropertyNames(wjChart.Palettes)
.filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype');
let rand = Math.floor(Math.random() * palettes.length);
//
return wjChart.Palettes[palettes[rand]];
}
customClass() {
let cls = '';
if(this.customTitles) {
cls += 'custom-titles ';
}
if(this.customLegend) {
cls += 'custom-legend';
}
return cls;
}
}
//
@NgModule({
imports: [FormsModule, WjInputModule, WjChartModule, 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 Legends and Titles</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">
<div class="form-group">
<label for="header">ヘッダー: </label>
<wj-combo-box [(text)]="header"></wj-combo-box><br>
<label for="footer">フッター: </label>
<wj-combo-box [(text)]="footer"></wj-combo-box><br>
<label for="xTitle">X軸タイトル: </label>
<wj-combo-box [(text)]="xTitle"></wj-combo-box><br>
<label for="yTitle">Y軸タイトル: </label>
<wj-combo-box [(text)]="yTitle"></wj-combo-box><br>
<label for="customTitles">カスタムタイトル: </label>
<input id="customTitles" type="checkbox" [(ngModel)]="customTitles"><br>
<label for="customLegend">カスタム凡例: </label>
<input id="customLegend" type="checkbox" [(ngModel)]="customLegend"><br>
<label for="legendPosition">凡例の位置: </label>
<wj-combo-box [(selectedValue)]="legendPosition" [itemsSource]="positionData" displayMemberPath="text" selectedValuePath="value"></wj-combo-box><br>
<wj-flex-chart [ngClass]="customClass()" bindingX="country" [header]="header" [footer]="footer" [itemsSource]="data" [palette]="palette">
<wj-flex-chart-legend [position]="legendPosition"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisX" [title]="xTitle"></wj-flex-chart-axis>
<wj-flex-chart-axis wjProperty="axisY" [title]="yTitle"></wj-flex-chart-axis>
<wj-flex-chart-series binding="sales" name="売上"></wj-flex-chart-series>
<wj-flex-chart-series binding="expenses" name="費用"></wj-flex-chart-series>
<wj-flex-chart-series binding="downloads" name="DL数"></wj-flex-chart-series>
</wj-flex-chart>
</div>
</div>
import { Injectable } from '@angular/core';
//
@Injectable()
export class DataService {
getData() {
let countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','),
data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000)
});
}
//
return data;
}
getComboData() {
return 'None,Left,Top,Right,Bottom'.split(',').map((value, index) => {
return { value: value, text: 'なし,左,上,右,下'.split(',')[index] }
});
}
}
.wj-flexchart {
height: 300px;
}
label {
width: 150px;
text-align: right;
}
.wj-control {
margin-bottom: 3px;
}
/* custom color for all titles */
.custom-titles.wj-flexchart .wj-title {
fill: #42357C;
}
/* custom size/weight for header */
.custom-titles.wj-flexchart .wj-header .wj-title {
font-size: 120%;
font-weight: bold;
}
/* custom size/weight for footer */
.custom-titles.wj-flexchart .wj-footer .wj-title {
font-size: 90%;
font-weight: bold;
}
/* custom style for axis-x/y titles */
.custom-titles.wj-flexchart .wj-axis-x .wj-title,
.custom-titles.wj-flexchart .wj-axis-y .wj-title{
font-size: 75%;
font-style: normal;
opacity: .5;
}
.wj-flexchart .wj-legend .wj-label {
opacity: .9;
font-size: 80%;
}
/* custom color for legend box */
.custom-legend.wj-flexchart .wj-legend > rect {
fill: #003000;
}
/* custom color for legend labels */
.custom-legend.wj-flexchart .wj-legend .wj-label {
fill: white;
font-style: italic;
}
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 wjCore from '@grapecity/wijmo';
import * as wjChart from '@grapecity/wijmo.chart';
import * as Chart from '@grapecity/wijmo.react.chart';
import * as Input from '@grapecity/wijmo.react.input';
import { getData, getComboData } from './data';
//
class App extends React.Component {
//
constructor(props) {
super(props);
this.state = {
data: getData(),
palette: this.getRandomPalette(),
header: "各国の実績",
footer: "powered by Wijmo",
xTitle: "国",
yTitle: "金額／数",
customTitles: true,
customLegend: true,
legendPositionSource: getComboData(),
legendPosition: 'Left'
};
}
//
render() {
return <div className="container-fluid">
<div>
<label>ヘッダー:</label>
<Input.ComboBox textChanged={this.headerChanged.bind(this)} text={this.state.header}>
</Input.ComboBox>
</div>
<div>
<label>フッター:</label>
<Input.ComboBox textChanged={this.footerChanged.bind(this)} text={this.state.footer}>
</Input.ComboBox>
</div>
<div>
<label>X軸タイトル:</label>
<Input.ComboBox textChanged={this.xTitleChanged.bind(this)} text={this.state.xTitle}>
</Input.ComboBox>
</div>
<div>
<label>Y軸タイトル:</label>
<Input.ComboBox textChanged={this.yTitleChanged.bind(this)} text={this.state.yTitle}>
</Input.ComboBox>
</div>
<div>
<label htmlFor="customTitles">カスタムタイトル: </label>
<input id="customTitles" type="checkbox" checked={this.state.customTitles} onChange={this.customTitlesChanged.bind(this)}/>
</div>
<div>
<label htmlFor="customLegend">カスタム凡例: </label>
<input id="customLegend" type="checkbox" checked={this.state.customLegend} onChange={this.customLegendChanged.bind(this)}/>
</div>
<div>
<label>凡例の位置: </label>
<Input.ComboBox itemsSource={this.state.legendPositionSource} displayMemberPath="text" selectedValuePath="value" textChanged={this.legendPositionChanged.bind(this)} text={this.state.legendPosition}>
</Input.ComboBox>
</div>
<div className="form-group">
<Chart.FlexChart header={this.state.header} footer={this.state.footer} bindingX="country" palette={this.state.palette} itemsSource={this.state.data} initialized={this.chartInitialized.bind(this)}>
<Chart.FlexChartAxis wjProperty="axisX" title={this.state.xTitle}></Chart.FlexChartAxis>
<Chart.FlexChartAxis wjProperty="axisY" title={this.state.yTitle}></Chart.FlexChartAxis>
<Chart.FlexChartSeries binding="sales" name="売上"></Chart.FlexChartSeries>
<Chart.FlexChartSeries binding="expenses" name="費用"></Chart.FlexChartSeries>
<Chart.FlexChartSeries binding="downloads" name="DL数"></Chart.FlexChartSeries>
<Chart.FlexChartLegend position={this.state.legendPosition}></Chart.FlexChartLegend>
</Chart.FlexChart>
</div>
</div>;
}
getRandomPalette() {
let palettes = Object.getOwnPropertyNames(wjChart.Palettes)
.filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype');
let rand = Math.floor(Math.random() * palettes.length);
//
return wjChart.Palettes[palettes[rand]];
}
chartInitialized(chart) {
this.theChart = chart;
wjCore.addClass(chart.hostElement, 'custom-titles custom-legend');
}
headerChanged(combo) {
this.setState({
header: combo.text
});
}
footerChanged(combo) {
this.setState({
footer: combo.text
});
}
//
xTitleChanged(combo) {
this.setState({
xTitle: combo.text
});
}
//
yTitleChanged(combo) {
this.setState({
yTitle: combo.text
});
}
//
customTitlesChanged() {
this.setState({
customTitles: !this.state.customTitles
});
if (this.theChart) {
wjCore.toggleClass(this.theChart.hostElement, 'custom-titles');
}
}
//
customLegendChanged() {
this.setState({
customLegend: !this.state.customLegend
});
if (this.theChart) {
wjCore.toggleClass(this.theChart.hostElement, 'custom-legend');
}
}
//
legendPositionChanged(combo) {
this.setState({
legendPosition: combo.selectedValue
});
}
}
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>GrapeCity Wijmo FlexChart Legends and Titles</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>
.wj-flexchart {
height: 300px;
}
label {
width: 150px;
text-align: right;
margin-right: 3px;
}
.wj-control {
margin-bottom: 3px;
}
/* custom color for all titles */
.custom-titles.wj-flexchart .wj-title {
fill: #42357C;
}
/* custom size/weight for header */
.custom-titles.wj-flexchart .wj-header .wj-title {
font-size: 120%;
font-weight: bold;
}
/* custom size/weight for footer */
.custom-titles.wj-flexchart .wj-footer .wj-title {
font-size: 90%;
font-weight: bold;
}
/* custom style for axis-x/y titles */
.custom-titles.wj-flexchart .wj-axis-x .wj-title,
.custom-titles.wj-flexchart .wj-axis-y .wj-title{
font-size: 75%;
font-style: normal;
opacity: .5;
}
.wj-flexchart .wj-legend .wj-label {
opacity: .9;
font-size: 80%;
}
/* custom color for legend box */
.custom-legend.wj-flexchart .wj-legend > rect {
fill: #003000;
}
/* custom color for legend labels */
.custom-legend.wj-flexchart .wj-legend .wj-label {
fill: white;
font-style: italic;
}
export function getData() {
let countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','), data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000)
});
}
//
return data;
}
//
export function getComboData() {
return 'None,Left,Top,Right,Bottom'.split(',').map((value, index) => {
return { value: value, text: 'なし,左,上,右,下'.split(',')[index] };
});
}
<template>
<div class="container-fluid">
<div class="form-group">
<label for="header">ヘッダー: </label>
<wj-combo-box :text="header" :textChanged="headerChanged"></wj-combo-box><br>
<label for="footer">フッター: </label>
<wj-combo-box :text="footer" :textChanged="footerChanged"></wj-combo-box><br>
<label for="xTitle">X軸タイトル: </label>
<wj-combo-box :text="xTitle" :textChanged="xTitleChanged"></wj-combo-box><br>
<label for="yTitle">Y軸タイトル: </label>
<wj-combo-box :text="yTitle" :textChanged="yTitleChanged"></wj-combo-box><br>
<label for="customTitles">カスタムタイトル: </label>
<input id="customTitles" type="checkbox" v-model="customTitles" v-on:change="customTitleChange"><br>
<label for="customLegend">カスタム凡例: </label>
<input id="customLegend" type="checkbox" v-model="customLegend" v-on:change="customLegendChange"><br>
<label for="legendPosition">凡例の位置: </label>
<wj-combo-box text="左" :textChanged="legendPositionChanged" :itemsSource="comboData" displayMemberPath="text" selectedValuePath="value"></wj-combo-box><br>
<wj-flex-chart class="custom-titles custom-legend" bindingX="country" :header="header" :footer="footer" :itemsSource="data"
:palette="palette" :initialized="initializeChart">
<wj-flex-chart-legend :position="legendPosition"></wj-flex-chart-legend>
<wj-flex-chart-axis wjProperty="axisX" :title="xTitle"></wj-flex-chart-axis>
<wj-flex-chart-axis wjProperty="axisY" :title="yTitle"></wj-flex-chart-axis>
<wj-flex-chart-series binding="sales" name="売上"></wj-flex-chart-series>
<wj-flex-chart-series binding="expenses" name="費用"></wj-flex-chart-series>
<wj-flex-chart-series binding="downloads" name="DL数"></wj-flex-chart-series>
</wj-flex-chart>
</div>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.input';
import '@grapecity/wijmo.vue2.chart';
import { getData, getComboData } from './data';
import * as wjCore from '@grapecity/wijmo';
import * as wjChart from '@grapecity/wijmo.chart';
let App = Vue.extend({
name: 'app',
data: function () {
return {
data: getData(),
comboData: getComboData(),
header: "各国の実績",
footer: "powered by Wijmo",
xTitle: "国",
yTitle: "金額／数",
legendPosition: 'Left',
customTitles: true,
customLegend: true,
palette: this.getRandomPalette()
}
},
methods: {
initializeChart: function(flex) {
this.theChart = flex;
},
customTitleChange: function(input) {
wjCore.toggleClass(this.theChart.hostElement, 'custom-titles', input.checked);
},
customLegendChange: function(input) {
wjCore.toggleClass(this.theChart.hostElement, 'custom-legend', input.checked);
},
legendPositionChanged: function(combo) {
this.legendPosition = combo.selectedValue;
},
getRandomPalette: function() {
let palettes = Object.getOwnPropertyNames(wjChart.Palettes)
.filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype');
let rand = Math.floor(Math.random() * palettes.length);
//
return wjChart.Palettes[palettes[rand]];
},
headerChanged: function(combo) {
this.header = combo.text;
},
footerChanged: function(combo) {
this.footer = combo.text;
},
xTitleChanged: function(combo) {
this.xTitle = combo.text;
},
yTitleChanged: function(combo) {
this.yTitle = combo.text;
}
}
})
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
body {
margin-bottom: 24px;
}
label {
margin-right: 3px;
width: 150px;
text-align: right;
}
/* custom color for all titles */
.custom-titles.wj-flexchart .wj-title {
fill: #42357C;
}
/* custom size/weight for header */
.custom-titles.wj-flexchart .wj-header .wj-title {
font-size: 120%;
font-weight: bold;
}
/* custom size/weight for footer */
.custom-titles.wj-flexchart .wj-footer .wj-title {
font-size: 90%;
font-weight: bold;
}
/* custom style for axis-x/y titles */
.custom-titles.wj-flexchart .wj-axis-x .wj-title,
.custom-titles.wj-flexchart .wj-axis-y .wj-title{
font-size: 75%;
font-style: normal;
opacity: .5;
}
.wj-flexchart .wj-legend .wj-label {
opacity: .9;
font-size: 80%;
}
/* custom color for legend box */
.custom-legend.wj-flexchart .wj-legend > rect {
fill: #003000;
}
/* custom color for legend labels */
.custom-legend.wj-flexchart .wj-legend .wj-label {
fill: white;
font-style: italic;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GrapeCity Wijmo FlexChart Legends and Titles</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>
export function getData() {
let countries = 'アメリカ,ドイツ,イギリス,日本,イタリア,ギリシャ'.split(','),
data = [];
//
for (let i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
downloads: Math.round(Math.random() * 20000)
});
}
//
return data;
}
//
export function getComboData() {
return 'None,Left,Top,Right,Bottom'.split(',').map((value, index) => {
return { value: value, text: 'なし,左,上,右,下'.split(',')[index] }
});
}
