Javascript 如何根据所选日期更改甘特图数据
我想根据日期（dd:mm:yyyy）选择器中选择的日期更改甘特图数据 这是我的截图。 HTML代码：Javascript 如何根据所选日期更改甘特图数据,javascript,html,fusioncharts,gantt-chart,Javascript,Html,Fusioncharts,Gantt Chart,我想根据日期（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="repor
<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>
请告诉我如何与HTML集成并为所选日期、月份和年份生成数据。要更改日期选择图表，您必须将eventlistener添加到
var-app=angular.module（'myApp'，[“ng fusioncharts”]），
globalContainer={}，
_插管；
app.controller（'ReportsController'，['$scope'，function$scope）{
$scope.chartOptions=[{
id:1，
名称：“第一天”
}, {
id:2，
名称：“第2天”
}];
$scope.reportsDataSource={
“图表”：{
“日期格式”：“mm/dd/yyyy hh:mm:ss”，
“outputDateFormat”：“ddds mn l，yyyy hh12:mn ampm”，
“标题”：“操作员生产力”，
“子选项”：“第1天”，
“slackFillColor”：“f44336”，
“showSlackAsFill”：“1”，
“canvasBorderAlpha”：“30”，
“plottooltext”：“$processName{br}$label:开始时间$start{br}-结束时间$end”，
“主题”：“fint”
},
“类别”：[
{
“类别”：[
{
“开始”：“09:00:00”，
“结束”：“18:00:00”，
“标签”：“活动时间线”
}
]
},
{
“对齐”：“居中”，
“类别”：[
{
“开始”：“11:00:00”，
“结束”：“10:59:59”，
“标签”：“上午9点至11点”
},
{
“开始”：“11:00:00”，
“结束”：“12:59:59”，
“标签”：“上午11点至下午1点”
},
{
“开始”：“13:00:00”，
“结束”：“13:59:59”，
“标签”：“下午1点至2点”
},
{
“开始”：“14:00:00”，
“结束”：“15:59:59”，
“标签”：“下午2点至4点”
},
{
“开始”：“16:00:00”，
“结束”：“17:59:59”，
“标签”：“下午4点至6点”
}
]
}
],
“过程”：{
“字体大小”：“12”，
“isbold”：“1”，
“对齐”：“左”，
“标题文本”：“操作员”，
“headerfontsize”：“14”，
“headervalign”：“middle”，
“headeralign”：“left”，
“过程”：[
{
“标签”：“Karthik”，
“id”：“EMP121”
},
{
“标签”：“David.G”，
“id”：“EMP122”
},
{
“标签”：“Mary.P”，
“id”：“EMP123”
},
{
“标签”：“Andrew.H”，
“id”：“EMP124”
},
{
“标签”：“Neil.M”，
“id”：“EMP125”
}
]
},
“任务”：{
“showlabels”：“1”，
“任务”：[
{
“进程ID”：“EMP121”，
“开始”：“09:00:00”，
“结束”：“10:00:00”，
“标签”：“活动1”
},
{
“进程ID”：“EMP121”，
“开始”：“15:00:00”，
“结束”：“14:30:00”，
“标签”：“活动2”
},
{
“进程ID”：“EMP122”，
“开始”：“10:00:00”，
“结束”：“16:34:17”，
“完成百分比”：“75”，
“标签”：“活动3”
},
{
“进程ID”：“EMP123”，
“开始”：“11:00:00”，
“结束”：“12:10:00”，
“标签”：“活动4”
},
{
“进程ID”：“EMP123”，
“开始”：“15:00:00”，
“结束”：“17:32:00”，
“标签”：“活动2”
},
{
“进程ID”：“EMP124”，
“开始”：“10:30:00”，
“结束”：“12:36:00”，
“标签”：“活动2”
},
{
“进程ID”：“EMP125”，
“开始”：“14:00:00”，
“结束”：“15:32:00”，
“标签”：“活动1”
}
]
}
};
$scope.reportsDataSource2={
“图表”：{
“日期格式”：“mm/dd/yyyy hh:mm:ss”，
“outputDateFormat”：“ddds mnl，yyyy hh12:mn ampm”，
“标题”：“操作员生产力”，
“子选项”：“第2天”，
“slackFillColor”：“f44336”，
“showSlackAsFill”：“1”，
“canvasBorderAlpha”：“30”，
“plottooltext”：“$processName{br}$label:开始时间$start{br}-结束时间$end”，
“主题”：“fint”
},
“类别”：[
{
“类别”：[
{
“开始”：“09:00:00”，
“结束”：“18:00:00”，
“标签”：“活动时间线”
}
]
},
{
“对齐”：“居中”，
“类别”：[
{
“开始”：“09:00:00”，
“结束”：“10:59:59”，
“标签”：“上午9点至11点”
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;
}
};
}]);