FlexChart
FlexChart
Axes
Multiple axes
This view shows the FlexChart with two y-axes.
Features
Settings
Axis X Label Angle: 0
Description
Multiple axes
This view shows the FlexChart with two y-axes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController { public ActionResult Axes() { Dictionary<string, IEnumerable<CustomerOrder>> OrderDatas = new Dictionary<string, IEnumerable<CustomerOrder>>(); OrderDatas.Add("2013", CustomerOrder.GetCountryCountOrderData(1, 5)); OrderDatas.Add("2014", CustomerOrder.GetCountryCountOrderData(3, 10)); OrderDatas.Add("CountryNames", CustomerOrder.GetCountryNameData()); ViewBag.OrderDatas = OrderDatas; var model = new ClientSettingsModel { Settings = CreateAxesSettings(), DefaultValues = new Dictionary<string, object> { { "AxisX.LabelAngle", 0 } } }; return View(model); } private static IDictionary<string, object[]> CreateAxesSettings() { var settings = new Dictionary<string, object[]> { { "AxisX.LabelAngle", new object[] {-90, -45, 0, 45, 90} } }; return settings; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | @{ ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = Model; Dictionary<string, IEnumerable<CustomerOrder>> OrderDatas = ViewBag.OrderDatas; } <c1-flex-chart id="@Model.ControlId" header="@FlexChartRes.Axes_Sales"> <c1-flex-chart-series name="2013" binding-x="ID" binding="Count"> <c1-items-source source-collection="@OrderDatas["2013"]"></c1-items-source> </c1-flex-chart-series> <c1-flex-chart-series name="2014" chart-type="LineSymbols" binding-x="ID" binding="Count"> <c1-items-source source-collection="@OrderDatas["2014"]"></c1-items-source> <c1-flex-chart-axis c1-property="AxisY" position="Right"></c1-flex-chart-axis> </c1-flex-chart-series> <c1-flex-chart-axis c1-property="AxisX" binding="ID,Country"> <c1-items-source source-collection="@OrderDatas["CountryNames"]"></c1-items-source> </c1-flex-chart-axis> </c1-flex-chart> @section Description{ <h3>@Html.Raw(FlexChartRes.Axes_MultipleAxes)</h3> <p>@Html.Raw(FlexChartRes.Axes_Text0)</p> } |