如何根据所选日期更改甘特图数据
How to change Gantt Chart data based on date selected
我想根据日期(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>
相关文章:
- Json数据包含日期和时间格式
- 将json回调数据转换为日期
- Solr查询以按日期月份获取数据&年
- 如何使用jQuery按数据日期属性选择元素
- Mongoose查询在两个日期时间之间提取数据
- 如何从jquery日期和时间选择器中选择和显示数据
- 选择数据属性日期值早于当前服务器日期的元素
- 生成时间戳日期|Javascript范围内的空数据
- 如何从Bootstrap日期时间选择器获取原始日期数据
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式)与今天的's日期,并在数组中显示筛选列表
- Angularjs和Jquery日期选择器数据绑定
- 自动将jqgrid滚动到具有存储数据的单元格的当前日期列和闪烁效果
- Jquery 数据表 序列化程序之后 ASP.NET 日期格式
- 使用new date()将数据与当前日期的MM/DD/YYYY格式的日期进行比较和筛选,同时从用户输入值中减去new d
- Powerbuilder/Javascript HTML数据窗口SetItem日期时间失败
- 按日期javascript对JSON数据进行排序
- 使用J-query数据表,美国日期格式的自定义排序不起作用
- 从数据日期格式中获取日期和月份
- 可数据日期排序dd-mm-yyyy问题
- Javascript jQuery.当数据日期相同时添加类