我正在使用GoJS制作图表。
我的图表配置(官方文档中的示例):
function init() {
//......
// define the Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "RoundedRectangle",
{
parameter1: 20, // the corner has a large radius
fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
stroke: null,
portId: "", // this Shape is the Node's port, not the whole Node
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
cursor: "pointer"
}),
$(go.TextBlock,
{
font: "bold 11pt helvetica, bold arial, sans-serif",
editable: true // editing the text automatically updates the model data
},
new go.Binding("text").makeTwoWay())
);
//......
}
我正在以下列方式创建节点:
var nodeOperations = new Object();
for (var i = 0; i < countState; i++) {
var json = {'id': i, 'loc': nodesCenters[i].x +' '+nodesCenters[i].y, 'text': markedStateTable['digitStates'][i] + ', ' + markedStateTable['namedStates'][i]};
nodes.push(json);
}
现在我需要以编程方式更改特定节点的填充颜色。我正在尝试这段代码:
var data = myDiagram.model.findNodeDataForKey(0);
myDiagram.model.setDataProperty(data, "fill", "green");
但在那之后,我的图表不显示。并且控制台中没有错误。我应该为节点设置新形状吗?或者我该怎么做?谢谢你的帮助!
答案 0 :(得分:1)
您需要为填充添加数据绑定,或者节点数据中的值无意义。毕竟,如果您有多个不同填充的多个形状,那么 //On initialize form :
WebClient client = new WebClient();
//On start download :
client.DownloadProgressChanged += new DownloadProgressChangedEventHandler(client_DownloadProgressChanged);
client.DownloadFileCompleted += new AsyncCompletedEventHandler(client_DownloadFileCompleted);
client.DownloadFileAsync(new Uri(url), @"C:\Temp\TestingSatelliteImagesDownload\" + ExtractImages.imagesUrls[currentImageIndex] + ".jpg");
...
void client_DownloadFileCompleted(object sender, AsyncCompletedEventArgs e)
{
if(currentImageIndex<ImageToDownloadCount){
currentImageIndex +=1;
client.DownloadFileAsync(new Uri(url), @"C:\Temp\TestingSatelliteImagesDownload\" + ExtractImages.imagesUrls[currentImageIndex] + ".jpg");
}
label1.Text = "Completed";
count++;
}
意味着什么呢?
所以将data.fill
添加到您想要更改的相关形状:
new go.Binding("fill")
但在那之后,我的图表不显示。
我不知道为什么会这样。使用go-debug.js查看更多警告。
另请参阅有关GraphObject操作的本教程,包括使用setDataProperty:http://gojs.net/latest/learn/graphobject.html
答案 1 :(得分:1)
请在nodeArray中指定填充颜色
var nodeDataArray = [
{ key: 1, text: "Name", fill: "#ff5722", stroke: "#4d90fe", description: "geethu" }];
然后将绑定添加到textBlock
$(go.Shape, "RoundedRectangle", { fill: "#cce6ff" // the default fill, if there is no data-binding }, new go.Binding("fill", "fill"))
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", {
isTreeExpanded: false,
click: showDetail
},
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "#cce6ff", // the default fill, if there is no data-binding
stroke: "#6699ff",
height: 40,
strokeWidth: 2,
portId: "",
cursor: "pointer", // the Shape is the port, not the whole Node
}, new go.Binding("fill", "fill")),
$(go.TextBlock, {
editable: true
},
new go.Binding("text", "text"))
),
$("TreeExpanderButton", { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top }, { visible: true })
);
答案 2 :(得分:1)
您可以根据要填充的节点使用switch语句,具体取决于属性值。假设你有一个名为'namedStates'的属性,根据你的节点颜色应该改变,这是我的例子:
$(go.Shape, "Rectangle", {
name: "SHAPE",
fill: "red",
stroke: null,
fromLinkable: true,
toLinkable: true,
cursor: "pointer"
}, new go.Binding("fill", "namedStates", function(type) {
switch (type) {
case 1:
return "#FF4081";
case 2:
return "#303F9F";
case 3:
return "#00796B";
case 4:
return "#FF5722";
case 5:
return "#5D4037";
case 6:
return "#7B1FA2";
default:
return '#8BC34A';
}
})),