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> }
マニュアル