瀏覽代碼

added docs, removed logs, added extra comments.

v3_develop
Alex de Mulder 11 年前
父節點
當前提交
b123ab295e
共有 6 個檔案被更改,包括 23743 行新增25163 行删除
  1. +1
    -0
      HISTORY.md
  2. +23663
    -25118
      dist/vis.js
  3. +7
    -0
      docs/graph2d.html
  4. +66
    -43
      examples/graph2d/09_external_legend.html
  5. +6
    -1
      lib/timeline/Graph2d.js
  6. +0
    -1
      lib/timeline/component/LineGraph.js

+ 1
- 0
HISTORY.md 查看文件

@ -11,6 +11,7 @@ http://visjs.org
- Added visible property to the groups. - Added visible property to the groups.
- Added getLegend() method. - Added getLegend() method.
- Added isGroupVisible() method.
### Timeline ### Timeline

+ 23663
- 25118
dist/vis.js
文件差異過大導致無法顯示
查看文件


+ 7
- 0
docs/graph2d.html 查看文件

@ -713,6 +713,13 @@ Graph2d.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
</td>
</tr>
<tr> <tr>
<td>setGroups(groups)</td> <td>setGroups(groups)</td>
<td>none</td> <td>none</td>

+ 66
- 43
examples/graph2d/09_external_legend.html 查看文件

@ -290,54 +290,77 @@
var graph2d = new vis.Graph2d(container, items, options, groups); var graph2d = new vis.Graph2d(container, items, options, groups);
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
for (var i = 0; i < groupsData.length; i++) {
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
var legend = graph2d.getLegend(groupsData[i].id,30,30);
legend.icon.setAttributeNS(null, "class", "legendIcon");
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
console.log(legend)
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legendIcon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
} }
legendDiv.appendChild(containerDiv);
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
} }
}
function toggleGraph(groupId) {
var container = document.getElementById(groupId + "_legendContainer")
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else {
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
} }
}
populateExternalLegend()
populateExternalLegend()
</script> </script>
</body> </body>

+ 6
- 1
lib/timeline/Graph2d.js 查看文件

@ -219,7 +219,7 @@ Graph2d.prototype.setGroups = function(groups) {
}; };
/** /**
*
* Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
* @param groupId * @param groupId
* @param width * @param width
* @param height * @param height
@ -235,6 +235,11 @@ Graph2d.prototype.getLegend = function(groupId, width, height) {
} }
} }
/**
* This checks if the visible option of the supplied group (by ID) is true or false.
* @param groupId
* @returns {*}
*/
Graph2d.prototype.isGroupVisible = function(groupId) { Graph2d.prototype.isGroupVisible = function(groupId) {
if (this.linegraph.groups[groupId] !== undefined) { if (this.linegraph.groups[groupId] !== undefined) {
return this.linegraph.groups[groupId].visible; return this.linegraph.groups[groupId].visible;

+ 0
- 1
lib/timeline/component/LineGraph.js 查看文件

@ -683,7 +683,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
} }
} }
} }
console.log(yAxisRightUsed)
if (yAxisLeftUsed == true) { if (yAxisLeftUsed == true) {
this.yAxisLeft.setRange(minLeft, maxLeft); this.yAxisLeft.setRange(minLeft, maxLeft);
} }

載入中…
取消
儲存