FlexChart
FlexChart
連結
機能
サンプル
設定
説明
グラフの連結
このビューは FlexChart を使用して、モデルの 2 組の値を表示する方法を示します。 これは、 FlexChart の最も一般的な使用例です。
このサンプルは、次の処理を実行します。
- FlexChart を IEnumerable DataSource と連結します。この各項目には、値「Date」、「SalesInUSA」、「SalesInJapan」が含まれます。 X データラベルを「Date」と設定します。
- Series オブジェクトを FlexChart の Series 配列に追加し、 その Binding プロパティに「SalesInUSA」を設定します。
- 2 番目の Series オブジェクトを FlexChart の Series 配列に追加し、 その Binding プロパティに「SalesInJapan」を設定します。
連結のほかに、このサンプルは InterpolateNulls プロパティと LegendToggle プロパティの効果を示します。 InterpolateNulls を true に設定すると、 null 値によって生成されたデータ間のギャップが埋められます。 LegendToggle を true に設定すると、凡例の系列の名前をクリックしたときに 系列の表示が切り替わります。
ソース
BindingController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
//
// GET: /FlexChart/
private Fruit _apple = new Fruit();
public ActionResult Binding()
{
ViewBag.DemoSettingsModel = new ClientSettingsModel
{
Settings = CreateBindingSettings()
};
return View(_apple.Sales);
}
private static IDictionary<string, object[]> CreateBindingSettings()
{
var settings = new Dictionary<string, object[]>
{
{"ChartType", new object[]{"Line", "LineSymbols", "Area"}},
{"InterpolateNulls", new object[]{true, false}},
{"LegendToggle", new object[]{true, false}},
};
return settings;
}
}
}
Binding.cshtml
@model IEnumerable<FruitSale>
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}
<div id="flexChart"></div>
@(Html.C1().FlexChart().Id(demoSettingsModel.ControlId).Bind("Date", Model).ChartType(C1.Web.Mvc.Chart.ChartType.Line).Series(sers =>
{
sers.Add().Binding("SalesInUSA").Name("Sales in USA").Style(s => s.StrokeWidth(3));
sers.Add().Binding("SalesInJapan").Name("Sales in Japan").Style(s => s.StrokeWidth(3));
}).InterpolateNulls(true).LegendToggle(true))
@section Description{
<h3>
@Html.Raw(Resources.FlexChart.Binding_ChartBinding)
</h3>
<p>@Html.Raw(Resources.FlexChart.Binding_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Binding_Text1)</p>
<ol>
<li>@Html.Raw(Resources.FlexChart.Binding_Li1)</li>
<li>@Html.Raw(Resources.FlexChart.Binding_Li2)</li>
<li>@Html.Raw(Resources.FlexChart.Binding_Li3)</li>
</ol>
<p>@Html.Raw(Resources.FlexChart.Binding_Text2)</p>
}
マニュアル