This解决方案......
'tooltip':
{
'isHtml': true,
'trigger': 'both'
},
...添加＆＃39;两者＆＃39;到工具提示触发器，不适用于此代码...
function createChart()
{
// Include chart timeline files
google.charts.load("current", {packages:["timeline","controls"]});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard()
{
var i = 0;
var type = "AP";
var APListURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('NXE Action Plan Tracker')/items";
var PMListURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('NXE Action Plans Temp Processing')/items";
var currentListURL = APListURL;
var dataTable = new google.visualization.DataTable();
var dashboard = new google.visualization.Dashboard( document.getElementById('timeline') );
var currentTime = new Date(Date.now());
var oneWeek = new Date(Date.now() + (7 * 24 * 60 * 60 * 1000));
var fourWeek = new Date(Date.now() + (7 * 24 * 60 * 60 * 1000 * 4));
var sixMonth = new Date(Date.now() + (7 * 24 * 60 * 60 * 1000 * 24));
// Add columns to data table
dataTable.addColumn({ type: 'string', id: 'System' });
dataTable.addColumn({ type: 'string', id: 'Action' });
dataTable.addColumn({ type: 'string', role: 'tooltip','p': {'html': true}});
dataTable.addColumn({ type: 'string', role: 'style'});
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
// Create range slider
var timelineRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'timeline-filter',
'state':
{
'range':
{
'start': currentTime,
'end': fourWeek
}
},
'options':
{
'filterColumnIndex': 4,
'ui':
{
'chartType': 'ScatterChart',
'chartOptions':
{
'width': '100%',
'height': '115',
'chartArea':
{
'width': '80%', // make sure this is the same for the chart and control so the axes align right
'height': '80%'
},
'hAxis':
{
'baselineColor': 'none'
}
},
'chartView':
{
'columns': [4,4]
}
}
}
});
// Create timeline
var timeline = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'timeline-chart',
'options':
{
'timeline': {'showBarLabels': false},
'width': '100%',
'height': '570',
'tooltip':
{
'isHtml': true,
'trigger': 'both'
},
'chartArea':
{
'width': '80%', // make sure this is the same for the chart and control so the axes align right
'height': '80%'
},
},
'view':
{
'columns': [0,1,2,3,4,5]
}
});
// Changing range
changeRange = function(range)
{
switch(range)
{
case "oneWeek":
timelineRangeSlider.setState({'range':{'start': currentTime, 'end': oneWeek}});
break;
case "fourWeek":
timelineRangeSlider.setState({'range':{'start': currentTime, 'end': fourWeek}});
break;
case "sixMonth":
timelineRangeSlider.setState({'range':{'start': currentTime, 'end': sixMonth}});
break;
default:
console.log('no bueno!');
break;
}
timelineRangeSlider.draw();
};
// Add current time to timeline
dataTable.addRow(["Current Time", "Now", "<div style='white-space: nowrap; padding:5px;'>Current Day: "+new Date(Date.now()).toDateString()+"</div>" ,'blue', new Date(Date.now()), new Date(Date.now())]);
// Add items to the timeline
getTimelineData();
function getTimelineData()
{
callSP = $.ajax
({
url: currentListURL,
method: "GET",
headers: { "Accept": "application/json; odata=verbose;" },
success: function (data)
{
// Returning the results
var listItems = data.d.results;
// Loop through items
listItems.forEach( function (entry)
{
console.log(entry);
// Get file name
$.ajax
({
url: entry.File.__deferred.uri,
method: "GET",
headers: { "Accept": "application/json; odata=verbose;" },
success: function (currentItemFileData)
{
var name = currentItemFileData.d.Name;
addRowToTable(name);
}
});
function addRowToTable(currentItemFileName)
{
// Create vars
var name = currentItemFileName || entry.Action || entry.Title;
var system = entry.System;
var start = entry.Planned_x0020_Start || entry.PM_x0020_Due;
var duration = parseInt(entry.Required_x0020_Time_x0020__x0028_hrs_x0029_);
var repetitions = parseInt(entry.Repetitions);
var frequency = parseInt(entry.Frequency_x0020__x0028_days_x0029_) * 24; // converted to hours
var toolTip = toolTipContents(entry,type,name);
var executionStatus = entry.Execution_x0020_Status;
var color;
// Set color by execution status
switch(executionStatus)
{
case "Complete":
color = "#bd25fe";
break;
case "In preparation":
color = "#feff3e";
break;
case "No longer required":
color = "#fe4763";
break;
case "Ready for execution":
color = "#41fe72";
break;
default:
color = "gray";
break;
}
// Add row if fields available
if ( start && duration && (executionStatus !== "No longer required") )
{
if ( repetitions && frequency )
{
for ( j=0; j<entry.Repetitions; j++ )
{
var actualStart = new Date(start).addHours(frequency * j);
var actualEnd = new Date(actualStart).addHours(duration);
// Add row to dataTable
dataTable.addRow([system, name, toolTip,color, actualStart, actualEnd]);
}
}
else
{
// Add row to dataTable
dataTable.addRow([system, name, toolTip,color, new Date(start), new Date(start).addHours(duration)]);
}
}
}
});
},
error: function (data)
{
console.log("ERROR: timeline ajax call");
console.log(data);
},
});
callSP.done(function (data, textStatus, jqXHR)
{
// If additional data is available, reinitiate call
if (data.d.__next)
{
currentListURL = data.d.__next;
getTimelineData();
}
else
{
if ( type == "AP")
{
type = "PM";
currentListURL = PMListURL;
getTimelineData();
}
else
{
console.log("done populating timeline, displaying timeline");
toggleLoader("off",1);
// Draw timeline
dashboard.bind(timelineRangeSlider, timeline);
dashboard.draw(dataTable);
}
}
});
}
}
}
这段代码就像魅力一样，但是当单击时间轴栏时，我似乎无法让工具提示保持打开状态。目前，它所做的只是关注栏和工具提示不会显示。如果我删除了目标属性，则将鼠标悬停在该栏上将显示工具提示。
我的假设是我可能不得不使用dataView。这是真的吗？
我怎样才能使这个工作？