Gantt-Timeline

Автор Tatsiana, 12 апреля 2018, 10:16:48

« назад - далее »

Tatsiana

Спасибо!

Теперь нужно, чтобы при наведении курсора длительность была в формате hh:mm.

admin

 :(
В ближайшие дни не смогу подключиться к этой интересной задаче, но я уверен, что у Вас получится. :)
Потом картинку скинете?

Tatsiana

#17
Вот что у меня получилось:

// Hacked together aimlessly by Kai Hilton-Jones
// Improved by Tim Payne
// Improved by Vojta Plzak 3.2.2018

require.config({
paths : {
//create alias to plugins
async : '/extensions/timeline/async',
goog : '/extensions/timeline/goog',
propertyParser : '/extensions/timeline/propertyParser',
}
});
define(["jquery", 'goog!visualization,1,packages:[corechart,table,timeline]'], function($) {'use strict';
return {
initialProperties : {
version : 1.0,
qHyperCubeDef : {
qDimensions : [],
qMeasures : [],
qInitialDataFetch : [{
qWidth : 20,
qHeight : 400
}]
},
chartType : "timeline",
showRowLabels : true,
groupByRowLabel : false
},
//property panel
definition : {
type : "items",
component : "accordion",
items : {
dimensions : {
uses : "dimensions",
min : 4,
max : 5
},
sorting : {
uses : "sorting"
},
settings : {
uses : "settings",
items :
{
selection1 :
{
type : "boolean",
component : "switch",
label : "Show Row Labels",
ref : "showRowLabels",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
},
selection2 :
{
type : "boolean",
component : "switch",
label : "Group Row Label",
ref : "groupByRowLabel",
options : [{
value : true,
label : "On"
},{
value : false,
label : "Off"
}]
}

}
}
}
},
snapshot : {
canTakeSnapshot : true
},

paint : function($element, layout) {

var self = this, elemNos = [], dimCount = this.backendApi.getDimensionInfos().length;
var data = new google.visualization.DataTable();

data.addColumn({ type: 'string', id: 'Campaign' });
data.addColumn({ type: 'string', id: 'Name' });

//data.addColumn({ type: 'string', role: 'style' });
        data.addColumn({ type: 'date', id: 'Start' });
        data.addColumn({ type: 'date', id: 'End' });
           

this.backendApi.eachDataRow(function(key, row) {
var values = [];
row.forEach(function(cell, col) {

//values.push(cell.qText);
if(dimCount==5) {
if(col<3)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
} else {
if(col<2)
{
values.push(cell.qText);
} else {
var myDate = new Date(cell.qText);
values.push(myDate);
}
}

});
data.addRows([values]);
//selections will always be on first dimension
elemNos.push(row[0].qElemNumber);
});

data.insertColumn(2,{ type: 'string', 'role': 'tooltip', p: {html: true}});

    var startDate;
    var endDate;
    var describe;
            var start;
            var end;
            var duration;
            var date;
    var number;
            var i;

           
            for(i=0; i < data.getNumberOfRows(); i++){
                number = data.getValue(i,0)
describe = data.getValue(i,1);
start = data.getValue(i,3);
                end = data.getValue(i,4);
                date = getDurDate(start, end);
duration = calcDuration(start, end);
                data.setValue(i,2, getHtmlCode(describe, date, duration))
            }
           

             
   function getDurDate(start, end){
                           var durDate = start.getDate() + '.' + (start.getMonth()+1) + '.' + start.getFullYear() + ' ';
   durDate += (start.getHours() < 10 ? '0' + start.getHours() : start.getHours()) + ':';
   durDate += (start.getMinutes() < 10 ? '0' + start.getMinutes() : start.getMinutes()) + ':';
   durDate += (start.getSeconds() < 10 ? '0' + start.getSeconds() : start.getSeconds()) + ' - ';
   
   durDate += end.getDate() + '.' + (end.getMonth()+1) + '.' + end.getFullYear() + ' ';
   durDate += (end.getHours() < 10 ? '0' + end.getHours(): end.getHours()) + ':';
   durDate += (end.getMinutes() < 10 ? '0' + end.getMinutes() : end.getMinutes()) + ':';
   durDate += (end.getSeconds() < 10 ? '0' + end.getSeconds(): end.getSeconds());
   
   return durDate;
   }
   
 
           
            function calcDuration(start, end){
                var seconds = (end.getTime() - start.getTime()) / 1000;
               
                var hours = Math.floor(seconds / 3600);
                seconds -= hours * 3600;
               
                var minutes = Math.floor(seconds / 60);
                seconds -= minutes *60;

                return(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds  < 10 ? '0' + seconds : seconds);

            }
           


           
function getHtmlCode(describe, date, duration){
                return '<div style="padding:5px;"><p style="border-bottom:1px solid #bdbdbd; padding-bottom: 10px;"><b>' + describe +'</b></p><p><b>' + number +': </b>' + date + '<br />'+ '<b>Длительность: </b>' + duration + '</p></div>';
            }

var chart = new google.visualization.Timeline($element[0]);





chart.draw(data, {
chartArea : {
left : 20,
top : 20,
width : "100%",
height : "100%"
},
timeline: { showRowLabels : layout.showRowLabels,
groupByRowLabel : layout.groupByRowLabel,
//singleColor: '#960000',
//colorByRowLabel: 'true',

//colorByRowLabel: layout.colorByRowLabel,
rowLabelStyle: {fontName: 'Arial', fontSize: 15 },
barLabelStyle: { fontName: 'Arial', fontSize: 10 }},
tooltip: { isHtml: true}

//barLabelStyle: { fontName: 'Verdana', fontSize: 13 , background: '#960000'}}
});
//selections
var selections = [];
var tim= [];
google.visualization.events.addListener(chart, 'select', function(e) {
var sel = chart.getSelection();

tim=sel;
//sel.forEach(function(val) {

selections[0]=elemNos[sel[0].row]
self.selectValues(0, selections, true);
//});
//chart.setSelection(tim);
//selections = selections.concat(sel);
});
//chart.setSelection([]);
//chart.setSelection(tim);

}
};

});




Но, к сожалению, в этом случае теряются пользовательские цвета.

Яндекс.Метрика