FlexChart
FlexChart
バブル
機能
サンプル
説明
バブル
このビューは、FlexChart コントロールを使用してバブルチャートを作成する方法を示します。
バブルチャートは、X と Y のほかにバブルサイズの連結を指定する必要があることを除き、 他のチャートタイプと同じです。バブルサイズに対応する連結を指定するには、Binding プロパティを、 各バブルの Y 値とサイズ値に使用されるプロパティの名前を指定する カンマ区切りの文字列に設定します。
この例では、チャートを「X」プロパティ、「Y」プロパティ、および「Size」プロパティを使用するオブジェクトを含むリストに連結します。 このチャートには 1 つの系列が含まれ、その Binding プロパティは 文字列「Y,Size」に設定されます。
ソース
BubbleController.cs
using System;
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController
{
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
<c1-flex-chart binding-x="X" chart-type="Bubble">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="Y,Size"></c1-flex-chart-series>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.Bubble_Bubble)
</h3>
<p>@Html.Raw(FlexChartRes.Bubble_Text0)</p>
<p>@Html.Raw(FlexChartRes.Bubble_Text1)</p>
<p>@Html.Raw(FlexChartRes.Bubble_Text2)</p>
}
マニュアル