Wijmo 5

FlexPie 101

这个页面展示了如何开始使用Wijmo FlexPie控件。

入门

在JavaScript应用中开始使用FlexPie控件的步骤:

  1. 添加对Wijmo的引用。
  2. 添加标记作为Wijmo控件的宿主。
  3. 通过JavaScript初始化Wijmo控件。
  4. (可选)添加一些CSS来自定义输入控件的外观。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.chart.js" type="text/javascript"></script> </head> <body> <!-- FlexPie --> <div id="introChart"></div> </body> </html>
// create controls var data = [], chart = new wijmo.chart.FlexPie('#introChart'), names = ['Oranges', 'Apples', 'Pears', 'Bananas', 'Pineapples']; // populate itemsSource for (var i = 0; i < names.length; i++) { data.push({ name: names[i], value: Math.round(Math.random() * 100) }); } // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = data; chart.endUpdate();

Result (live):

基本功能

FlexPie控件有5个基本属性,允许你自定义它的布局和外观:

下面这个样例可以让你观察到这些属性更改后的情况。而且,单击一个饼图切块会为数据点显示一个工具提示。

<div id="basicChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Inner Radius</label> <div class="col-md-9"> <input id="basicInnerRadius" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Offset</label> <div class="col-md-9"> <input id="basicOffset" type="text" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Start Angle</label> <div class="col-md-9"> <input id="basicStartAngle" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div id="basicPalette"></div> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="basicReversed" type="checkbox" /> Reversed? </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#basicChart'), innerRadius = new wijmo.input.InputNumber('#basicInnerRadius'), offset = new wijmo.input.InputNumber('#basicOffset'), startAngle = new wijmo.input.InputNumber('#basicStartAngle'), palettes = new wijmo.input.Menu('#basicPalette'), reversed = document.getElementById('basicReversed'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.endUpdate(); // innerRadius - initialize InputNumber's properties innerRadius.min = 0; innerRadius.max = 1; innerRadius.step = 0.1; innerRadius.format = 'n'; innerRadius.valueChanged.addHandler(function (sender) { chart.innerRadius = sender.value; }); // offset - initialize InputNumber's properties offset.min = 0; offset.max = 1; offset.step = 0.1; offset.format = 'n'; offset.valueChanged.addHandler(function (sender) { chart.offset = sender.value; }); // startAngle - initialize InputNumber's properties startAngle.min = -360; startAngle.max = 360; startAngle.step = 45; startAngle.valueChanged.addHandler(function (sender) { chart.startAngle = sender.value; }); // palettes - initialize Menu's properties palettes.itemsSource = app.palettes; palettes.selectedValue = 'standard'; palettes.textChanged.addHandler(function (sender) { if (!sender.selectedValue) return; chart.palette = wijmo.chart.Palettes[app.palettes[sender.selectedIndex]]; app.updateMenuHeader(sender, '<b>Palette</b>: ', sender.text); }); app.updateMenuHeader(palettes, '<b>Palette</b>: ', palettes.text); // change event for reversed checkbox reversed.addEventListener('change', function() { chart.reversed = this.checked; });

Result (live):

图例和标题

legend属性用来自定义图表图例的外观。headerfooter属性用来添加FlexPie控件的标题。

下面的实例允许你实时更改FlexPie的legend.position, headerfooter属性。

<div id="ltChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Header</label> <div class="col-md-9"> <input id="ltHeader" type="text" class="form-control" placeholder="Specify the FlexPie's header" /> </div> </div> <div class="form-group"> <label class="col-md-3 control-label">Footer</label> <div class="col-md-9"> <input id="ltFooter" type="text" class="form-control" placeholder="Specify the FlexPie's footer" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="ltLegPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#ltChart'), menu = new wijmo.input.Menu('#ltLegPos'), header = document.getElementById('ltHeader'), footer = document.getElementById('ltFooter'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Fruit By Value'; chart.footer = '2014 GrapeCity, inc.'; chart.endUpdate(); // header input header.value = chart.header; header.addEventListener('input', function () { chart.header = this.value; }); // footer input footer.value = chart.footer; footer.addEventListener('input', function () { chart.footer = this.value; }); // legend.position - initialize Menu's properties menu.selectedIndexChanged.addHandler(function (sender, args) { if (!sender.selectedValue) return; chart.legend.position = sender.selectedValue; app.updateMenuHeader(sender, '<b>Legend Position</b>: ', sender.text); }); menu.selectedValue = 'Right';

Result (live):

选择

FlexPie控件允许你通过单击或者触摸一个饼图切块来选择数据点。 使用selectionMode属性来指定是否允许对数据点的选择或者禁用选择(默认)。

设置selctionMode属性为Point会导致用户在单击饼图切块时,FlexPie自动更新selection属性, 并且将"wj-state-selected"类应用到选中元素中。设置FlexPie的selectionMode属性为SeriesNone会禁用控件内的选择。

FlexPie提供三种额外的属性来自定义选择:

<div id="selChart"></div> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3 control-label">Selected Item Offset</label> <div class="col-md-9"> <input id="selItemOffset" type="text" /> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <select id="selItemPos"> <option value="None">None</option> <option value="Left">Left</option> <option value="Top">Top</option> <option value="Right">Right</option> <option value="Bottom">Bottom</option> </select> </div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <div class="checkbox"> <label> <input id="selAnimated" type="checkbox"> Is Animated? </label> </div> </div> </div> </div>
// create controls var chart = new wijmo.chart.FlexPie('#selChart'), inputNumber = new wijmo.input.InputNumber('#selItemOffset'), menu = new wijmo.input.Menu('#selItemPos'), check = document.getElementById('selAnimated'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.isAnimated = true; chart.selectionMode = 'Point'; chart.selectedItemPosition = 'Top'; chart.endUpdate(); // selectedItemOffset - initialize InputNumber's properties inputNumber.min = 0; inputNumber.max = 0.5; inputNumber.step = 0.1; inputNumber.format = 'n'; inputNumber.valueChanged.addHandler(function(sender) { chart.selectedItemOffset = sender.value; }); // selectedItemPosition - initialize Menu's properties menu.selectedIndexChanged.addHandler(function(sender) { if (!sender.selectedValue) return; chart.selectedItemPosition = sender.selectedValue; app.updateMenuHeader(sender, '<b>Selected Item Position</b>: ', sender.text); }); menu.selectedValue = 'Top'; // isAnimated - initialize checkbox properties check.checked = true; check.addEventListener('change', function() { chart.isAnimated = this.checked; });

Result (live):

主题

FlexPie控件的外观很大程度上是在CSS中定义。除了默认的主题, 我们包括了一些专业设计的主题,它们自定义了Wijmo控件的外观来达到一个一致的,具有吸引力的效果。

你可以使用CSS自定义FlexPie的外观。要做到这一点,从默认主题复制CSS规则到一个新的CSS文件并且修改需要的属性。

在这个样例中,我们向控件添加了一个"custom-pie-chart"CSS类并且定义了一些CSS规则来改变填充,字体集和页眉、页尾、图例的字体粗细。

<div id="themeChart" class="custom-pie-chart"></div>
// create controls var chart = new wijmo.chart.FlexPie('#themeChart'); // initialize FlexPie's properties chart.beginUpdate(); chart.binding = 'value'; chart.bindingName = 'name'; chart.itemsSource = app.getData(); chart.header = 'Header'; chart.footer = 'Footer'; chart.endUpdate();
.custom-pie-chart.wj-flexchart .wj-header .wj-title, .custom-pie-chart.wj-flexchart .wj-footer .wj-title, .custom-pie-chart.wj-flexchart .wj-legend > .wj-label { fill: #666; font-family: 'Courier New', Courier, monospace; font-weight: bold; }

Result (live):