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 に設定すると、凡例の系列の名前をクリックしたときに 系列の表示が切り替わります。
このサンプルでは、Axis の LabelMin プロパティと LabelMax プロパティの効果も示しています。 True に設定すると、ラベルが表示されます。
ソース
BindingController.cs
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
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[] { false, true } },
{ "AxisY.LabelMin", new object[] { false, true } },
{ "AxisY.LabelMax", new object[] {false, true } }
};
return settings;
}
}
}
Binding.cshtml
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
var style = new SVGStyle { StrokeWidth = 3 };
}
<c1-flex-chart id="@demoSettingsModel.ControlId" binding-x="Date" chart-type="Line" legend-toggle="true" interpolate-nulls="true">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="SalesInUSA" name="Sales in USA" style="@style"></c1-flex-chart-series>
<c1-flex-chart-series binding="SalesInJapan" name="Sales in Japan" style="@style"></c1-flex-chart-series>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.Binding_ChartBinding)
</h3>
<p>@Html.Raw(FlexChartRes.Binding_Text0)</p>
<p>@Html.Raw(FlexChartRes.Binding_Text1)</p>
<ol>
<li>@Html.Raw(FlexChartRes.Binding_Li1)</li>
<li>@Html.Raw(FlexChartRes.Binding_Li2)</li>
<li>@Html.Raw(FlexChartRes.Binding_Li3)</li>
</ol>
<p>@Html.Raw(FlexChartRes.Binding_Text2)</p>
<p>@Html.Raw(FlexChartRes.Binding_Text3)</p>
}
マニュアル