FlexChart
FlexChart
Step Chart
機能
サンプル
設定
説明
このデモでは、ライン、シンボル、エリアステップチャートを示します。 ステップチャートは、金利と時間など、不規則な時間間隔で変化するあらゆるタイプのデータを表示するのに役立ちます。
ソース
StepChartController.cs
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult StepChart()
{
var data = new ClientSettingsModel
{
Settings = new Dictionary<string, object[]>
{
{"ChartType", new object[]{"Step", "StepSymbols", "StepArea"}},
{"StepPosition", new object[] {"Start", "Center", "End"}}
}
};
data.LoadRequestData(Request);
ViewBag.DemoSettingsModel = data;
return View(StatisticMessage.GetData());
}
}
}
StepChart.cshtml
@model IEnumerable<StatisticMessage>
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel;
var chartType = demoSettingModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Step);
var stepPositon = demoSettingModel.GetEnum("StepPosition", StepPosition.Start);
}
<script>
function updateStepPosition(control, value) {
control.options = { step: { position: value.toLowerCase() } };
}
</script>
<c1-flex-chart id="@demoSettingModel.ControlId" binding-x="Month" chart-type="@chartType">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="SMS" name="SMS Totals">
</c1-flex-chart-series>
<c1-flex-chart-series binding="Email" name="Email Totals">
</c1-flex-chart-series>
<c1-chart-legend position="Top"></c1-chart-legend>
<c1-flex-chart-axis c1-property="AxisX" axis-line="false" major-tick-marks="None"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" major-grid="false"></c1-flex-chart-axis>
<c1-chart-options>
<c1-step-options position="@stepPositon" />
</c1-chart-options>
</c1-flex-chart>
@section Description{
<p>@Html.Raw(FlexChartRes.StepChart_Text0)</p>
}
マニュアル