FlexChart
FlexChart
ガントチャート
機能
サンプル
依存関係と完了割合
タスクの依存関係と完了割合を表示するための要素を追加する関数を ItemFormatterプロパティに設定して、チャートを カスタマイズします。
説明
FlexChartを使用してガントチャートをカスタマイズする手順
- チャートを初期化します(ChartTypeを'C1.Web.Mvc.Chart.ChartType.Bar'に設定し、データに連結します)。
- チャートに系列を追加し、系列の連結プロパティを開始日付と終了日付のフィールドに設定します。
- AxisYをカスタマイズして、主グリッド線を非表示にし、副グリッド線を表示します。
ソース
GanttController.cs
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using Task = MvcExplorer.Models.Task;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController
{
public IActionResult Gantt()
{
return View(GetTasks());
}
private IEnumerable<Task> GetTasks()
{
var list = new List<Task>();
list.Add(new Task { Name = "Task1", Start = new DateTime(2017, 1, 1), End = new DateTime(2017, 3, 31), Parent = null, Percent = 100 });
list.Add(new Task { Name = "Task2", Start = new DateTime(2017, 4, 1), End = new DateTime(2017, 4, 30), Parent = "Task1", Percent = 100 });
list.Add(new Task { Name = "Task3", Start = new DateTime(2017, 5, 1), End = new DateTime(2017, 7, 31), Parent = "Task2", Percent = 75 });
list.Add(new Task { Name = "Task4", Start = new DateTime(2017, 4, 1), End = new DateTime(2017, 7, 31), Parent = "Task1", Percent = 33 });
list.Add(new Task { Name = "Task5", Start = new DateTime(2017, 8, 1), End = new DateTime(2017, 9, 30), Parent = "Task3,Task4", Percent = 0 });
list.Add(new Task { Name = "Task6", Start = new DateTime(2017, 10, 1), End = new DateTime(2017, 12, 31), Parent = "Task1,Task5", Percent = 0 });
list.Add(new Task { Name = "Task7", Start = new DateTime(2017, 1, 1), End = new DateTime(2017, 12, 31), Parent = null, Percent = 50 });
return list;
}
}
}
Gantt.cshtml
@using Task = MvcExplorer.Models.Task;
@model IEnumerable<Task>
@{
var toolTip1 = FlexChartRes.GranttTooltip1;
var toolTip2 = FlexChartRes.GranttTooltip2;
}
@(Html.C1().FlexChart<Task>().Id("simpleGantt")
.Bind(Model)
.Header(FlexChartRes.SimpleGanttChartHeader)
.BindingX("Name")
.AxisY(y => y.MajorGrid(false).MinorGrid(true).Reversed(true))
.ChartType(C1.Web.Mvc.Chart.ChartType.Bar)
.Series(sb => sb.Add().Binding("Start,End"))
.Tooltip(t => t.Content(toolTip1))
)
<br />
<h4>
@Html.Raw(FlexChartRes.EnhancedGanttChartTitle)
</h4>
<p>@Html.Raw(FlexChartRes.EnhancedChart_Description)</p>
@(Html.C1().FlexChart<Task>().Id("advancedGantt")
.Bind(Model)
.Header(FlexChartRes.EnhancedGanttChartHeader)
.BindingX("Name")
.AxisY(y => y.MajorGrid(false).MinorGrid(true).Reversed(true))
.ChartType(C1.Web.Mvc.Chart.ChartType.Bar)
.Series(sb => sb.Add().Binding("Start,End"))
.Tooltip(t => t.Content(toolTip2))
.ItemFormatter("ganttItemFormatter")
.OnClientRendering("ganttChartRendered")
)
@section Description{
<h4>
@Html.Raw(FlexChartRes.SimpleGanttChartTitle)
</h4>
<ol>
<li>@Html.Raw(FlexChartRes.SimpleChart_Step1)</li>
<li>@Html.Raw(FlexChartRes.SimpleChart_Step2)</li>
<li>@Html.Raw(FlexChartRes.SimpleChart_Step3)</li>
</ol>
}
@section Scripts{
<script type="text/javascript">
// show the percentage complete for each task
function ganttItemFormatter(engine, hti, defaultFormatter) {
// draw the item as usual
defaultFormatter();
// show percentage done
var task = hti.item;
if (wijmo.isNumber(task.Percent) && task.Percent > 0) {
var pct = wijmo.clamp(task.Percent, 0, 100) / 100,
rc = getTaskRect(hti.series.chart, task).inflate(-8, -8);
engine.fill = pct == 1 ? 'green' : 'gold';//engine.stroke;
engine.drawRect(rc.left, rc.top, rc.width * pct, rc.height);
}
}
// show the task dependencies
function ganttChartRendered(s, e) {
var chart = s,
tasks = chart.collectionView.items;
tasks.forEach(function (task) { // for each task
var parents = getTaskParents(task, tasks); // get the parent tasks
parents.forEach(function (parent) { // for each parent
drawConnectingLine(e.engine, chart, task, parent); // draw connector
});
});
}
function drawConnectingLine(engine, chart, task, parent) {
var rc1 = getTaskRect(chart, parent), // parent rect
rc2 = getTaskRect(chart, task), // task rect
x1 = rc1.left + rc1.width / 2, // parent x center
x2 = rc2.left, // task left
y1 = rc1.bottom, // parent bottom
y2 = rc2.top + rc2.height / 2; // task y center
// draw connecting line
var xs = [x1, x1, x2],
ys = [y1, y2, y2];
engine.drawLines(xs, ys, 'connector', {
stroke: 'black'
});
// draw arrow at the end
var sz = 5;
xs = [x2 - 2 * sz, x2, x2 - 2 * sz];
ys = [y2 - sz, y2, y2 + sz];
engine.drawPolygon(xs, ys, 'arrow', {
fill: 'black'
})
}
function getTaskRect(chart, task) {
var x1 = chart.axisX.convert(task.Start),
x2 = chart.axisX.convert(task.End),
index = chart.collectionView.items.indexOf(task),
y1 = chart.axisY.convert(index - .35),
y2 = chart.axisY.convert(index + .35);
return new wijmo.Rect(x1, y1, x2 - x1 + 1, y2 - y1 + 1);
}
function getTaskParents(task, tasks) {
parents = [];
if (task.Parent) {
task.Parent.split(',').forEach(function (name) {
for (var i = 0; i < tasks.length; i++) {
if (tasks[i].Name == name) {
parents.push(tasks[i]);
break;
}
}
});
}
return parents;
}
</script>
}
マニュアル