Wijmo5FlexPie

概要

概要

機能

Settings

エクスポート
エクスポート形式:
高さ:
幅:
エクスポート名:

Description

このサンプルでは、wijmo5 FlexPie を画像ファイルにエクスポートする方法を示します。
using C1.Web.Mvc.Chart;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;

namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexPieController : Controller
    {
        private readonly ImageExportOptions _flexPieModel = new ImageExportOptions
        {
            Exporter = "wijmo.chart.ImageExporter"
        };

        private readonly ClientSettingsModel _demoSettingsModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"InnerRadius", new object[]{0, 0.25, 0.5, 0.75}},
                {"Offset", new object[]{0, 0.1, 0.2, 0.3, 0.4, 0.5}},
                {"StartAngle", new object[]{0, 90, 180, -90}},
                {"Reversed", new object[]{false, true}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}},
                {"DataLabel.Position", new object[]{PieLabelPosition.None, PieLabelPosition.Inside, PieLabelPosition.Center, PieLabelPosition.Outside}},
                {"DataLabel.Border", new object[]{false, true}}
            }
        };

        public ActionResult Index()
        {
            ViewBag.DemoSettingsModel = _demoSettingsModel;
            ViewBag.Options = _flexPieModel;
            return View();
        }

    }
}
@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}

<div id="@(optionsModel.ControlId)" ></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
<script>
    var chart = new wijmo.chart.FlexPie('#@(optionsModel.ControlId)');

    chart.beginUpdate();
    chart.binding = 'value';
    chart.bindingName = 'name';
    chart.itemsSource = getData();
    chart.innerRadius = 0;
    chart.offset = 0;
    chart.startAngle = 0;
    chart.reversed = false;
    chart.palette = wijmo.chart.Palettes["standard"];
    chart.dataLabel.content = "{value}";
    chart.dataLabel.position = "None";
    chart.endUpdate();

    function getData() {
        var data = [],
            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)
            });
        }
        return data;
    }

    function convertPalette(value) {
        return wijmo.chart.Palettes[value];
    }
</script>

@section Description{
    @Html.Raw(Resources.Wijmo5FlexPie.Index_Text0)
}