FlexChart
FlexChart
系列の連結
機能
サンプル
説明
グラフ系列の連結
このビューは、FlexChart を使用して、 複数のデータソースから（系列ごとに 1 つの）データを表示する方法を示します。
このサンプルは、次の処理を実行します。
- チャートの BindingX プロパティと Binding プロパティを「X」と「Y」に設定します。
- Series オブジェクトをチャートの Series 配列に追加し、それを「X」プロパティと「Y」プロパティを含むオブジェクトの配列と連結します。
- 2 番目の Series オブジェクトをチャートの Series 配列に追加し、それを「X」プロパティと「Y」プロパティを含むオブジェクトの別の配列と連結します。
BindingX プロパティと Binding プロパティをチャートではなく Series オブジェクトに設定することもできます。
ソース
SeriesBindingController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult SeriesBinding()
{
return View();
}
}
}
SeriesBinding.cshtml
@{
ViewBag.Title = "SeriesBinding";
List<Dot> function1 = new List<Dot>();
List<Dot> function2 = new List<Dot>();
for (int i = 0; i < 300; i++)
{
function1.Add(new Dot { X = 2 * Math.Sin(0.16 * i), Y = 2 * Math.Cos(0.12 * i) });
function2.Add(new Dot { X = Math.Sin(0.1 * i), Y = Math.Cos(0.15 * i) });
}
}
<div id="FlexChartTestSample1"></div>
@(Html.C1().FlexChart("#FlexChartTestSample1").ChartType(C1.Web.Mvc.Chart.ChartType.Spline).Series(sers =>
{
sers.Add().Bind(function1).BindingX("X").Binding("Y").Name("function 1");
sers.Add().Bind(function2).BindingX("X").Binding("Y").Name("function 2");
}).AxisX(x =>
{
x.Origin(0).MinorGrid(true).MajorGrid(true);
}).AxisY(y =>
{
y.Origin(0).MinorGrid(true);
}))
@section Description{
<h3>
@Html.Raw(Resources.FlexChart.SeriesBinding_ChartSeriesBinding)
</h3>
<p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text1)</p>
<ol>
<li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li1)</li>
<li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li2)</li>
<li>@Html.Raw(Resources.FlexChart.SeriesBinding_Li3)</li>
</ol>
<p>@Html.Raw(Resources.FlexChart.SeriesBinding_Text2)</p>
}
マニュアル