Wijmo5RadialGauge

概要

概要

機能

Settings

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

Description

このサンプルでは、wijmo5 RadialGauge を画像ファイルにエクスポートする方法を示します。
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 Wijmo5RadialGaugeController : Controller
    {
        private readonly ImageExportOptions _radialGaugeModel = new ImageExportOptions
        {
            Exporter = "wijmo.gauge.ImageExporter"
        };

        private readonly ClientSettingsModel _demoSettingsModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"IsReadOnly", new object[]{false, true }},
                {"Step", new object[]{0.5, 1, 2}},
                {"ShowRanges", new object[]{true, false}},
                {"ShowText", new object[]{"All", "Value", "MinMax", "None"}},
                {"SweepAngle", new object[]{180, 270, 360}},
                {"StartAngle", new object[]{0, 90, 180, 270, 360}}
            }
        };

        public ActionResult Index()
        {
            ViewBag.DemoSettingsModel = _demoSettingsModel;
            ViewBag.Options = _radialGaugeModel;
            return View();
        }
    }
}
@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}

<div id="@(optionsModel.ControlId)" style="width:400px; height:200px"></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
<script>
    var gauge = new wijmo.gauge.RadialGauge("#@(optionsModel.ControlId)"),
        lowerRange = new wijmo.gauge.Range(),
        middleRange = new wijmo.gauge.Range(),
        upperRange = new wijmo.gauge.Range();
    gauge.value = 5;
    gauge.max = 10;
    gauge.min = 0;
    gauge.format = "";
    gauge.step = 0.5;
    gauge.pointer.thickness = 0.5;
    gauge.showText = "All";
    gauge.sweepAngle = 180;
    gauge.startAngle = 0;
    gauge.isReadOnly = false;

    // set Range propeties
    lowerRange.min = 1;
    lowerRange.max = 2;
    lowerRange.color = "Red";
    middleRange.min = 3;
    middleRange.max = 4;
    middleRange.color = "Green";
    upperRange.min = 7;
    upperRange.max = 10;
    upperRange.color = "Yellow";

    gauge.ranges.push(lowerRange);
    gauge.ranges.push(middleRange);
    gauge.ranges.push(upperRange);
</script>

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