根据键定义自定义图标?
Define custom icon based on key?
我有模型数据,每个条目包含几个键,感兴趣的是 color
。
我想根据 color
中的值指定自定义图标,但在获取该值时遇到问题。
这是我的模型的样子:
{ key: "legendVendor", geo: "Vendor", color: vendorColor },
{ key: "legendFactory", geo: "Factory", color: factoryColor },
{ key: "legendVendorFactory", geo: "Vendor Factory", color: vendorFactoryColor },
{ key: "legendSupplier", geo: "Supplier", color: supplierColor },
我的颜色常量是这样定义的:
var vendorColor = "#C8DA2B";
var factoryColor = "#800080";
var supplierColor = "#CCD1D1";
var supplyChainColor = "#FFD700";
var vendorFactoryColor = "#34c0eb";
这就是我根据颜色设置形状的方式:
function geoFunc(geoname, color) {
var geo = icons[geoname];
// var color = icons[color];
if (geo === undefined) geo = icons["cloud"]; // use this for an unknown icon name
if (typeof geo === "string") {
geo = icons[geoname] = go.Geometry.parse(geo, true); // fill each geometry
}
switch(color) {
case vendorColor:
// code block
geo = icons["heart"]
geo = icons[geoname] = go.Geometry.parse(geo, true);
break;
default:
// code block
}
return geo;
}
这就是我调用该函数的方式:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{isTreeExpanded:false},
{doubleClick: function(e, node) {node.expandTree(1);}},
$(go.TextBlock, {text:"Text",width:100,height:100,textAlign:"center",font:"12pt sans-serif",margin:3,wrap: go.TextBlock.WrapDesiredSize,alignment:go.Spot.BottomCenter},new go.Binding("text", "geo")),
$(go.Shape,
{ margin: 3, fill: colors["white"], strokeWidth: 0 },
new go.Binding("geometry", "geo", "color", geoFunc), // magic happens here <--------
new go.Binding("fill", "color")),
如何将 color
的值传递给函数 geoFunc
?
您应该会收到 运行 次错误,因为 "color" 不是转换函数。使用 go-debug.js
获取更多错误或警告消息可能会有所帮助。
如果删除 Binding 构造函数的 "geo" 参数,您将对构造函数进行有效调用,然后将调用 geoFunc
函数并传递 [=12] 的值=].
我有模型数据,每个条目包含几个键,感兴趣的是 color
。
我想根据 color
中的值指定自定义图标,但在获取该值时遇到问题。
这是我的模型的样子:
{ key: "legendVendor", geo: "Vendor", color: vendorColor },
{ key: "legendFactory", geo: "Factory", color: factoryColor },
{ key: "legendVendorFactory", geo: "Vendor Factory", color: vendorFactoryColor },
{ key: "legendSupplier", geo: "Supplier", color: supplierColor },
我的颜色常量是这样定义的:
var vendorColor = "#C8DA2B";
var factoryColor = "#800080";
var supplierColor = "#CCD1D1";
var supplyChainColor = "#FFD700";
var vendorFactoryColor = "#34c0eb";
这就是我根据颜色设置形状的方式:
function geoFunc(geoname, color) {
var geo = icons[geoname];
// var color = icons[color];
if (geo === undefined) geo = icons["cloud"]; // use this for an unknown icon name
if (typeof geo === "string") {
geo = icons[geoname] = go.Geometry.parse(geo, true); // fill each geometry
}
switch(color) {
case vendorColor:
// code block
geo = icons["heart"]
geo = icons[geoname] = go.Geometry.parse(geo, true);
break;
default:
// code block
}
return geo;
}
这就是我调用该函数的方式:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{isTreeExpanded:false},
{doubleClick: function(e, node) {node.expandTree(1);}},
$(go.TextBlock, {text:"Text",width:100,height:100,textAlign:"center",font:"12pt sans-serif",margin:3,wrap: go.TextBlock.WrapDesiredSize,alignment:go.Spot.BottomCenter},new go.Binding("text", "geo")),
$(go.Shape,
{ margin: 3, fill: colors["white"], strokeWidth: 0 },
new go.Binding("geometry", "geo", "color", geoFunc), // magic happens here <--------
new go.Binding("fill", "color")),
如何将 color
的值传递给函数 geoFunc
?
您应该会收到 运行 次错误,因为 "color" 不是转换函数。使用 go-debug.js
获取更多错误或警告消息可能会有所帮助。
如果删除 Binding 构造函数的 "geo" 参数,您将对构造函数进行有效调用,然后将调用 geoFunc
函数并传递 [=12] 的值=].