FlexChart
FlexChart
スケーリング
機能
サンプル
説明
チャートのスケーリング
対数軸を使用して、データが集中する範囲を拡大し、精度を落とすことなくチャートの明確さを向上させることができます。
スケーリング形式を使用すると、軸ラベルを明瞭かつ簡潔な形式で表示できます。
次のバブルチャートは、約 200 か国の人口（x 軸）、GDP（y 軸）、および 1 人当たりの所得（バブルサイズ）を示しています。 対数軸を使用することでデータが拡散し、 チャートが読みやすくなっています。
ソース
ScalingController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace MvcExplorer.Controllers
{
public partial class FlexChartController
{
// GET: /<controller>/
public ActionResult Scaling()
{
return View(Population.GetData());
}
}
}
Scaling.cshtml
@{
var svgStyle = new SVGStyle()
{
Fill = "gold",
Stroke= "orange"
};
}
<c1-flex-chart binding-x="POP" chart-type="Bubble" legend-position="None">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="GDP,PCI" name="GDP" style="svgStyle">
</c1-flex-chart-series>
<c1-flex-chart-tooltip content="<b>{Country}</b>:<br/>{PCI:n0} US$/year/capita" is-content-html="true"></c1-flex-chart-tooltip>
<c1-flex-chart-axis c1-property="AxisX" title="Population (millions)" format="g4,," log-base="10"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" title="GDP (US$ billions)" format="g4," log-base="10"></c1-flex-chart-axis>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.Scaling_ChartScaling)
</h3>
<p>@Html.Raw(FlexChartRes.Scaling_Text0)</p>
<p>@Html.Raw(FlexChartRes.Scaling_Text1)</p>
<p>@Html.Raw(FlexChartRes.Scaling_Text2)</p>
}
マニュアル