如何根据所选日期更改甘特图数据

How to change Gantt Chart data based on date selected

本文关键字:数据 日期 何根      更新时间:2023-09-26

我想根据日期(dd:mm:yyyy)选择器中选择的日期更改甘特图数据。

这是我的屏幕截图。甘特图

HTML代码:

<div class="col-sm-8" ng-controller="ReportsController">
<div class="col-sm-12 page-top-actions">
    <div class="col-sm-3 day-wise-report">
      <input type="date" name="report" tooltip="Day">
    </div>
    <div class="col-sm-3 show-report">
        <button class="btn btn-default" type="submit">Show Report</button>
    </div>
</div>
<select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart"
        ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
<fusioncharts
        id="exampleId"
        width="800"
        height="400"
        type="gantt"
        datasource="{{productivityReportData}}">
</fusioncharts>

Javascript代码:

    app.controller('ReportsController', ['$scope', function ($scope) {
    $scope.chartOptions = [{
        id: 1,
        name: "Day 1"
    }, {
        id: 2,
        name: "Day 2"
    }];
    $scope.reportsDataSource = {
        "chart": {
            "dateformat": "mm/dd/yyyy hh:mm:ss",
            "outputDateFormat": "ddds mn    l, yyyy hh12:mn ampm",
            "caption": "Operator Productivity",
            "subCaption": "Day 1",
            "slackFillColor": "f44336",
            "showSlackAsFill": "1",
            "canvasBorderAlpha": "30",
            "plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
            "theme": "fint"
        },
        "categories": [
            {
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "18:00:00",
                        "label": "Activity Timeline"
                    }
                ]
            },
            {
                "align": "center",
                "category": [
                    {
                        "start": "11:00:00",
                        "end": "10:59:59",
                        "label": "9am-11am"
                    },
                    {
                        "start": "11:00:00",
                        "end": "12:59:59",
                        "label": "11am-1pm"
                    },
                    {
                        "start": "13:00:00",
                        "end": "13:59:59",
                        "label": "1pm-2pm"
                    },
                    {
                        "start": "14:00:00",
                        "end": "15:59:59",
                        "label": "2pm-4pm"
                    },
                    {
                        "start": "16:00:00",
                        "end": "17:59:59",
                        "label": "4pm-6pm"
                    }
                ]
            }
        ],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headertext": "Operators",
            "headerfontsize": "14",
            "headervalign": "middle",
            "headeralign": "left",
            "process": [
                {
                    "label": "Karthik",
                    "id": "EMP121"
                },
                {
                    "label": "David.G",
                    "id": "EMP122"
                },
                {
                    "label": "Mary.P",
                    "id": "EMP123"
                },
                {
                    "label": "Andrew.H",
                    "id": "EMP124"
                },
                {
                    "label": "Neil.M",
                    "id": "EMP125"
                }
            ]
        },
        "tasks": {
            "showlabels": "1",
            "task": [
                {
                    "processid": "EMP121",
                    "start": "09:00:00",
                    "end": "10:00:00",
                    "label": "Activity1"

                },
                {
                    "processid": "EMP121",
                    "start": "15:00:00",
                    "end": "14:30:00",
                    "label": "Activity2"
                },
                {
                    "processid": "EMP122",
                    "start": "10:00:00",
                    "end": "16:34:17",
                    "percentComplete": "75",
                    "label": "Activity3"
                },
                {
                    "processid": "EMP123",
                    "start": "11:00:00",
                    "end": "12:10:00",
                    "label": "Activity4"
                },
                {
                    "processid": "EMP123",
                    "start": "15:00:00",
                    "end": "17:32:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP124",
                    "start": "10:30:00",
                    "end": "12:36:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP125",
                    "start": "14:00:00",
                    "end": "15:32:00",
                    "label": "Activity 1"
                }
            ]
        }
    };
    $scope.reportsDataSource2 = {
        "chart": {
            "dateformat": "mm/dd/yyyy hh:mm:ss",
            "outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
            "caption": "Operator Productivity",
            "subCaption": "Day 2",
            "slackFillColor": "f44336",
            "showSlackAsFill": "1",
            "canvasBorderAlpha": "30",
            "plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
            "theme": "fint"
        },
        "categories": [
            {
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "18:00:00",
                        "label": "Activity Timeline"
                    }
                ]
            },
            {
                "align": "center",
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "10:59:59",
                        "label": "9am-11am"
                    },
                    {
                        "start": "11:00:00",
                        "end": "12:59:59",
                        "label": "11am-1pm"
                    },
                    {
                        "start": "13:00:00",
                        "end": "13:59:59",
                        "label": "1pm-2pm"
                    },
                    {
                        "start": "14:00:00",
                        "end": "15:59:59",
                        "label": "2pm-4pm"
                    },
                    {
                        "start": "16:00:00",
                        "end": "17:59:59",
                        "label": "4pm-6pm"
                    }
                ]
            }
        ],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headertext": "Operators",
            "headerfontsize": "14",
            "headervalign": "middle",
            "headeralign": "left",
            "process": [
                {
                    "label": "Karthik",
                    "id": "EMP121"
                },
                {
                    "label": "David.G",
                    "id": "EMP122"
                },
                {
                    "label": "Mary.P",
                    "id": "EMP123"
                },
                {
                    "label": "Andrew.H",
                    "id": "EMP124"
                },
                {
                    "label": "Neil.M",
                    "id": "EMP125"
                }
            ]
        },
        "tasks": {
            "showlabels": "1",
            "task": [
                {
                    "processid": "EMP121",
                    "start": "09:00:00",
                    "end": "10:00:00",
                    "label": "Activity1"

                },
                {
                    "processid": "EMP121",
                    "start": "15:00:00",
                    "end": "14:30:00",
                    "label": "Activity2"
                },
                {
                    "processid": "EMP122",
                    "start": "10:00:00",
                    "end": "16:34:17",
                    "percentComplete": "75",
                    "label": "Activity3"
                },
                {
                    "processid": "EMP123",
                    "start": "11:00:00",
                    "end": "12:10:00",
                    "label": "Activity4"
                },
                {
                    "processid": "EMP123",
                    "start": "15:00:00",
                    "end": "17:32:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP124",
                    "start": "10:30:00",
                    "end": "12:36:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP125",
                    "start": "14:00:00",
                    "end": "15:32:00",
                    "label": "Activity 1"
                }
            ]
        }
    };
    $scope.updateChart = function () {
        if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
            $scope.productivityReportData = $scope.reportsDataSource;
        }
        if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
            $scope.productivityReportData = $scope.reportsDataSource2;
        }
    };
}]);

请告诉我如何与HTML集成并生成所选日期、月份和年份的数据。

为了在选择日期时更改图表,您必须将eventlistener添加到<input type="date" name="report" tooltip="Day"></div>。我已经更改了您的代码并更新了代码。

var app = angular.module('myApp', ["ng-fusioncharts"]),
	globalContainer = {},
	_intUpdate;
app.controller('ReportsController', ['$scope', function ($scope) {
    $scope.chartOptions = [{
        id: 1,
        name: "Day 1"
    }, {
        id: 2,
        name: "Day 2"
    }];
    $scope.reportsDataSource = {
        "chart": {
            "dateformat": "mm/dd/yyyy hh:mm:ss",
            "outputDateFormat": "ddds mn    l, yyyy hh12:mn ampm",
            "caption": "Operator Productivity",
            "subCaption": "Day 1",
            "slackFillColor": "f44336",
            "showSlackAsFill": "1",
            "canvasBorderAlpha": "30",
            "plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
            "theme": "fint"
        },
        "categories": [
            {
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "18:00:00",
                        "label": "Activity Timeline"
                    }
                ]
            },
            {
                "align": "center",
                "category": [
                    {
                        "start": "11:00:00",
                        "end": "10:59:59",
                        "label": "9am-11am"
                    },
                    {
                        "start": "11:00:00",
                        "end": "12:59:59",
                        "label": "11am-1pm"
                    },
                    {
                        "start": "13:00:00",
                        "end": "13:59:59",
                        "label": "1pm-2pm"
                    },
                    {
                        "start": "14:00:00",
                        "end": "15:59:59",
                        "label": "2pm-4pm"
                    },
                    {
                        "start": "16:00:00",
                        "end": "17:59:59",
                        "label": "4pm-6pm"
                    }
                ]
            }
        ],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headertext": "Operators",
            "headerfontsize": "14",
            "headervalign": "middle",
            "headeralign": "left",
            "process": [
                {
                    "label": "Karthik",
                    "id": "EMP121"
                },
                {
                    "label": "David.G",
                    "id": "EMP122"
                },
                {
                    "label": "Mary.P",
                    "id": "EMP123"
                },
                {
                    "label": "Andrew.H",
                    "id": "EMP124"
                },
                {
                    "label": "Neil.M",
                    "id": "EMP125"
                }
            ]
        },
        "tasks": {
            "showlabels": "1",
            "task": [
                {
                    "processid": "EMP121",
                    "start": "09:00:00",
                    "end": "10:00:00",
                    "label": "Activity1"
                },
                {
                    "processid": "EMP121",
                    "start": "15:00:00",
                    "end": "14:30:00",
                    "label": "Activity2"
                },
                {
                    "processid": "EMP122",
                    "start": "10:00:00",
                    "end": "16:34:17",
                    "percentComplete": "75",
                    "label": "Activity3"
                },
                {
                    "processid": "EMP123",
                    "start": "11:00:00",
                    "end": "12:10:00",
                    "label": "Activity4"
                },
                {
                    "processid": "EMP123",
                    "start": "15:00:00",
                    "end": "17:32:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP124",
                    "start": "10:30:00",
                    "end": "12:36:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP125",
                    "start": "14:00:00",
                    "end": "15:32:00",
                    "label": "Activity 1"
                }
            ]
        }
    };
    $scope.reportsDataSource2 = {
        "chart": {
            "dateformat": "mm/dd/yyyy hh:mm:ss",
            "outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
            "caption": "Operator Productivity",
            "subCaption": "Day 2",
            "slackFillColor": "f44336",
            "showSlackAsFill": "1",
            "canvasBorderAlpha": "30",
            "plottooltext": "$processName{br} $label: starting time $start{br} - ending time $end",
            "theme": "fint"
        },
        "categories": [
            {
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "18:00:00",
                        "label": "Activity Timeline"
                    }
                ]
            },
            {
                "align": "center",
                "category": [
                    {
                        "start": "09:00:00",
                        "end": "10:59:59",
                        "label": "9am-11am"
                    },
                    {
                        "start": "11:00:00",
                        "end": "12:59:59",
                        "label": "11am-1pm"
                    },
                    {
                        "start": "13:00:00",
                        "end": "13:59:59",
                        "label": "1pm-2pm"
                    },
                    {
                        "start": "14:00:00",
                        "end": "15:59:59",
                        "label": "2pm-4pm"
                    },
                    {
                        "start": "16:00:00",
                        "end": "17:59:59",
                        "label": "4pm-6pm"
                    }
                ]
            }
        ],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "headertext": "Operators",
            "headerfontsize": "14",
            "headervalign": "middle",
            "headeralign": "left",
            "process": [
                {
                    "label": "Karthik",
                    "id": "EMP121"
                },
                {
                    "label": "David.G",
                    "id": "EMP122"
                },
                {
                    "label": "Mary.P",
                    "id": "EMP123"
                },
                {
                    "label": "Andrew.H",
                    "id": "EMP124"
                },
                {
                    "label": "Neil.M",
                    "id": "EMP125"
                }
            ]
        },
        "tasks": {
            "showlabels": "1",
            "task": [
                {
                    "processid": "EMP121",
                    "start": "09:00:00",
                    "end": "10:00:00",
                    "label": "Activity1"
                },
                {
                    "processid": "EMP122",
                    "start": "10:00:00",
                    "end": "16:34:17",
                    "percentComplete": "75",
                    "label": "Activity3"
                },
                {
                    "processid": "EMP123",
                    "start": "11:00:00",
                    "end": "12:10:00",
                    "label": "Activity4"
                },
                {
                    "processid": "EMP123",
                    "start": "15:00:00",
                    "end": "17:32:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP124",
                    "start": "10:30:00",
                    "end": "12:36:00",
                    "label": "Activity 2"
                },
                {
                    "processid": "EMP125",
                    "start": "14:00:00",
                    "end": "15:32:00",
                    "label": "Activity 1"
                }
            ]
        }
    };
    $scope.updateChart = function () {
        if ($scope.selectedChart.chart === undefined || $scope.selectedChart.chart.id === 1) {
            $scope.productivityReportData = $scope.reportsDataSource;
        }
        if ($scope.selectedChart.chart !== undefined && $scope.selectedChart.chart.id === 2) {
            $scope.productivityReportData = $scope.reportsDataSource2;
        }
    };
    $scope._intUpdate = _intUpdate = function(){
    	$scope.$apply(function(){
    		$scope.productivityReportData = $scope.reportsDataSource2;	
		});	
    }
}]);
function updateChart(){
	_intUpdate();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
	<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<div ng-app="myApp">
  <div class="col-sm-8" ng-controller="ReportsController">
	<div class="col-sm-12 page-top-actions">
	    <div class="col-sm-3 day-wise-report">
	      <input type="date" name="report" tooltip="Day" onchange="updateChart()">
	    </div>
	    <div class="col-sm-3 show-report">
	        <button class="btn btn-default" type="submit">Show Report</button>
	    </div>
	</div>
	<select ng-init="selectedChart.chart = chartOptions[0]; updateChart()" ng-model="selectedChart.chart"
	        ng-change="updateChart()" ng-options="c.name for c in chartOptions track by c.id"></select>
	<div fusioncharts
	        id="exampleId"
	        width="800"
	        height="400"
	        type="gantt"
	        datasource="{{productivityReportData}}">
	</div>
</div>