FlexChart
FlexChart
バブル
機能
サンプル
説明
バブル
このビューは、FlexChart コントロールを使用してバブルチャートを作成する方法を示します。
バブルチャートは、X と Y のほかにバブルサイズの連結を指定する必要があることを除き、 他のチャートタイプと同じです。バブルサイズに対応する連結を指定するには、Binding プロパティを、 各バブルの Y 値とサイズ値に使用されるプロパティの名前を指定する カンマ区切りの文字列に設定します。
この例では、チャートを「X」プロパティ、「Y」プロパティ、および「Size」プロパティを使用するオブジェクトを含むリストに連結します。 このチャートには 1 つの系列が含まれ、その Binding プロパティは 文字列「Y,Size」に設定されます。
ソース
BubbleController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Bubble()
{
List<Dot> bubbles = new List<Dot>();
var rand = new Random(0);
for (int i = 0; i < 30; i++)
{
double x = i;
double y = rand.Next(1, 10);
double size = rand.Next(1, 10);
bubbles.Add(new Dot { X = x, Y = y * 10, Size = size * 100 });
}
return View(bubbles);
}
}
}
Bubble.cshtml
@model IEnumerable<Dot>
<div id="flexChart" style="height: 300px"></div>
@(Html.C1().FlexChart("#flexChart").ChartType(C1.Web.Mvc.Chart.ChartType.Bubble).Bind("X", Model).Series(sers =>
{
sers.Add().Binding("Y,Size");
}))
@section Description{
<h3>
@Html.Raw(Resources.FlexChart.Bubble_Bubble)
</h3>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text1)</p>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text2)</p>
}
マニュアル