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 MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
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>
<c1-flex-chart id="FlexChartTestSample1" chart-type="Spline">
<c1-flex-chart-series binding-x="X" binding="Y" name="function 1">
<c1-items-source source-collection="function1"></c1-items-source>
</c1-flex-chart-series>
<c1-flex-chart-series binding-x="X" binding="Y" name="function 2">
<c1-items-source source-collection="function2"></c1-items-source>
</c1-flex-chart-series>
<c1-flex-chart-axis c1-property="AxisX" origin="0" minor-grid="true" major-grid="true"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" origin="0" minor-grid="true"></c1-flex-chart-axis>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.SeriesBinding_ChartSeriesBinding)
</h3>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text0)</p>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text1)</p>
<ol>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li1)</li>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li2)</li>
<li>@Html.Raw(FlexChartRes.SeriesBinding_Li3)</li>
</ol>
<p>@Html.Raw(FlexChartRes.SeriesBinding_Text2)</p>
}
マニュアル