FlexChart

FlexChart

概要

機能

サンプル

設定

説明

はじめに

このビューは、c1-flex-chart タグを使用することで、FlexChart の基本機能を示します。チャートはモデルに連結され、ユーザーはチャートタイプ、系列の積み上げ、および回転を選択できます。

マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。

FlexChart を使用する最も単純な方法は、次のとおりです。

c1-items-source サブタグの source-collection 属性にモデルを設定することで、 FlexChart を IEnumerable DataSource に連結します。
binding-x 属性を、 X 値（この例ではフルーツ名）を含むプロパティの名前に設定すると、チャートの ItemsSource のフィールドがマップされます。
1 つ以上の c1-flex-chart-series サブタグを追加し、その binding属性を、 Y 値（この例では、March、April、May などの月）を含むプロパティの名前に設定します。

LegendOrientationを使用して、凡例の方向を決定します。

Legend.MaxSizeを使用して、凡例の最大サイズ（左または右の位置の幅と上または下の位置の高さ）を取得または設定します。サイズはピクセル単位（例、maxSize = '100px'）またはパーセント単位（例、maxSize = '50％'）で指定できます。

ソース

IndexController.cs

using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Chart;

namespace MvcExplorer.Controllers
{
    public partial class FlexChartController: Controller
    {
        public ActionResult Index()
        {
            var settings = new ClientSettingsModel
            {
                Settings = CreateIndexSettings(),
                DefaultValues = GetIndexDefaultValues()
            };
            settings.LoadRequestData(Request);
            ViewBag.DemoSettingsModel = settings;
            ViewBag.Palettes = GetPalettes();

            return View(Fruit.GetFruitsSales());
        }

        private static IDictionary<string, object[]> CreateIndexSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false, true}},
                {"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
                {"LegendOrientation", new object[]{ "Auto", "Vertical", "Horizontal"}},
                {"TooltipPosition", new object[]{
                        "Above",
                        "AboveRight",
                        "RightTop",
                        "Right",
                        "RightBottom",
                        "BelowRight",
                        "Below",
                        "BelowLeft",
                        "LeftBottom",
                        "Left",
                        "LeftTop",
                        "AboveLeft"
                    }},
                {"MaxSize", new object[] {"50px", "10%", "100%", "20px", "0.5%", "50%", "100px" } }
            };

            return settings;
        }

        private static IDictionary<string, object> GetIndexDefaultValues()
        {
            var defaultValues = new Dictionary<string, object>
            {
                {"GroupWidth", "70%"}
            };

            return defaultValues;
        }

        private object[] GetPalettes()
        {
            return new object[] {
                new {Header = "Standard", Value = Palettes.Standard},
                new {Header = "Cocoa", Value = Palettes.Cocoa},
                new {Header = "Coral", Value = Palettes.Coral},
                new {Header = "Dark", Value = Palettes.Dark},
                new {Header = "Highcontrast", Value = Palettes.Highcontrast},
                new {Header = "Light", Value = Palettes.Light},
                new {Header = "Midnight", Value = Palettes.Midnight},
                new {Header = "Minimal", Value = Palettes.Minimal},
                new {Header = "Modern", Value = Palettes.Modern },
                new {Header = "Organic", Value = Palettes.Organic },
                new {Header = "Slate", Value = Palettes.Slate },
                new {
                    Header = "Qualitative",
                    Items = new object[]
                    {
                        new {Header = "Accent", GroupName = "Qualitative", Value = Palettes.Qualitative.Accent},
                        new {Header = "Dark2", GroupName = "Qualitative", Value = Palettes.Qualitative.Dark2},
                        new {Header = "Paired", GroupName = "Qualitative", Value = Palettes.Qualitative.Paired},
                        new {Header = "Pastel1", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel1},
                        new {Header = "Pastel2", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel2},
                        new {Header = "Set1", GroupName = "Qualitative", Value = Palettes.Qualitative.Set1},
                        new {Header = "Set2", GroupName = "Qualitative", Value = Palettes.Qualitative.Set2},
                        new {Header = "Set3", GroupName = "Qualitative", Value = Palettes.Qualitative.Set3},
                    }
                },
                new {
                    Header = "Diverging",
                    Items = new object[]
                    {
                        new {Header = "BrBG", GroupName = "Diverging", Value = Palettes.Diverging.BrBG},
                        new {Header = "PiYG", GroupName = "Diverging", Value = Palettes.Diverging.PiYG},
                        new {Header = "PRGn", GroupName = "Diverging", Value = Palettes.Diverging.PRGn},
                        new {Header = "PuOr", GroupName = "Diverging", Value = Palettes.Diverging.PuOr},
                        new {Header = "RdBu", GroupName = "Diverging", Value = Palettes.Diverging.RdBu},
                        new {Header = "RdGy", GroupName = "Diverging", Value = Palettes.Diverging.RdGy},
                        new {Header = "RdYlBu", GroupName = "Diverging", Value = Palettes.Diverging.RdYlBu},
                        new {Header = "RdYlGn", GroupName = "Diverging", Value = Palettes.Diverging.RdYlGn},
                        new {Header = "Spectral",GroupName = "Diverging", Value = Palettes.Diverging.Spectral},
                    }
                },
                new {
                    Header = "SequentialSingle",
                    Items = new object[]
                    {
                        new {Header = "Blues", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Blues},
                        new {Header = "Greens",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greens},
                        new {Header = "Greys",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greys},
                        new {Header = "Oranges",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Oranges},
                        new {Header = "Purples", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Purples},
                        new {Header = "Reds",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Reds},
                    }
                },
                new {
                    Header = "SequentialMulti",
                    Items = new object[]
                    {
                        new { Header = "BuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuGn},
                        new {Header = "BuPu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuPu},
                        new {Header = "GnBu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.GnBu},
                        new {Header = "OrRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.OrRd},
                        new {Header = "PuBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBu},
                        new {Header = "PuBuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBuGn},
                        new {Header = "PuRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuRd},
                        new {Header = "RdPu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.RdPu},
                        new {Header = "YlGn",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGn},
                        new {Header = "YlGnBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGnBu},
                        new {Header = "YlOrBr",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrBr},
                        new {Header = "YlOrRd",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrRd}
                    }
                }
            };
        }
    }
}

Index.cshtml

@{
    ViewBag.DemoSettings = true;
    ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel;
    var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column);
    var orientationType = demoSettingModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto);
    var stacking = demoSettingModel.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (content) =>
    {
        return string.Equals(content, "Stacked 100%", StringComparison.OrdinalIgnoreCase)
            ? "Stacked100pc"
            : content;
    });
    var rotated = demoSettingModel.GetBool("Rotated", false);
    object[] palettesModel = ViewBag.Palettes;
}


<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Name"
               chart-type="@chartType" stacking="@stacking" rotated="@rotated" palette="C1.Web.Mvc.Chart.Palettes.Standard"
               legend-position="Bottom" legend-orientation="@orientationType">
    <c1-flex-chart-tooltip></c1-flex-chart-tooltip>
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-flex-chart-series binding="MarPrice" name="March">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="AprPrice" name="April">
    </c1-flex-chart-series>
    <c1-flex-chart-series binding="MayPrice" name="May">
    </c1-flex-chart-series>
</c1-flex-chart>

@section Scripts{
    <script type="text/javascript">
        convertStacking = function (value) {
            return value === "Stacked 100%" ? "Stacked100pc" : value;
        };
        convertPalette = function (value) {
            return wijmo.chart.Palettes[value];
        };
        updateGroupWidth = function (control, value) {
            control.options = { groupWidth: value === "50 pixels" ? 50 : value };
        };
        customChangeLegendOrientation = function (control, value) {
            control.legend.orientation = value;
        };
        function customChangeTooltipPosition(control, value) {
            control.tooltip.position = value;
        }
        function customChangeMaxSize(control, value) {
            control.legend.maxSize = value;
        }

        function itemPaletteClicked(sender) {
            if (sender.selectedItem) {
                let flexChart = wijmo.Control.getControl("#@demoSettingModel.ControlId")
                if (flexChart) {
                    flexChart.palette = sender.selectedItem.Value;
                    flexChart.invalidate();
                }
                let menu = wijmo.Control.getControl("#paletteMenu");
                if (sender.selectedItem.GroupName && sender.selectedItem.GroupName.length) {
                    menu.header = "Palette: <b>" + sender.selectedItem.GroupName + "." + sender.selectedItem.Header + "<b/>";
                }
                else {
                    menu.header = "Palette: <b>" + sender.selectedItem.Header + "<b/>";
                }
                sender.invalidate();
            }
        }
    </script>
}

@section Settings{
    <c1-menu id="paletteMenu" header="Palette: <b>Standard</b>" show-drop-down-button="true"  sub-items-path="Items" item-clicked="itemPaletteClicked">
        <c1-items-source source-collection="@palettesModel"></c1-items-source>
    </c1-menu>
}

@section Description{
    <h3>
        @Html.Raw(FlexChartRes.Index_Introduction)
    </h3>
    <p>@Html.Raw(FlexChartRes.Index_Text0)</p>
    <p>@Html.Raw(FlexChartRes.Index_Text1)</p>
    <p>@Html.Raw(FlexChartRes.Index_Text2)</p>
    <ol>
        <li>@Html.Raw(FlexChartRes.Index_Li1)</li>
        <li>@Html.Raw(FlexChartRes.Index_Li2)</li>
        <li>@Html.Raw(FlexChartRes.Index_Li3)</li>
    </ol>
    <p>@Html.Raw(FlexChartRes.Index_Text3)</p>
    <p>@Html.Raw(FlexChartRes.Index_Text4)</p>
}

マニュアル

新しいコントロール

人気のコントロール

データ管理

データの視覚化

ナビゲーションとレイアウト

ドキュメント

スケジュール

入力と編集

チュートリアル

新機能

導入ガイド（英語）

サンプルアプリケーション（英語）