Wijmo5FlexRadar

概要

概要

機能

Settings

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

Description

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

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

        public ActionResult Index()
        {
            ViewBag.Options = _imageExportOptions;
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateRadarSettings(),
                DefaultValues = GetIndexDefaultValues()
            };

            return View();
        }

        private static IDictionary<string, object[]> CreateRadarSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Scatter", "Line", "LineSymbols", "Area"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked100pc"}},
                {"StartAngle", new object[]{0, 60, 120, 180, 240, 300, 360}},
                {"TotalAngle", new object[]{60, 120, 180, 240, 300, 360}},
                {"Reversed", new object[]{false, true}}
            };

            return settings;
        }

        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"TotalAngle", 360}
            };

            return defaultValues;
        }
    }
}
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}

<div id="@(optionsModel.ControlId)"></div>

<script>
    // create controls
    var chart = new wijmo.chart.radar.FlexRadar('#@(optionsModel.ControlId)');
    // initialize FlexRadar's properties
    chart.initialize({
        itemsSource: getFlexRadarData(),
        bindingX: 'country',
        chartType: wijmo.chart.radar.RadarChartType.Column,
        series: [
            { name: 'Sales', binding: 'sales' },
            { name: 'Downloads', binding: 'downloads' }
        ]
    });

    function getFlexRadarData() {
        var data = [],
            countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');

        // populate itemsSource
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i],
                downloads: Math.ceil(Math.random() * 80) + 20,
                sales: Math.ceil(Math.random() * 80) + 20
            });
        }
        return data;
    }
</script>

@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}

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