我正在研究这个zingchart:
var myConfig = {
type: "line",
plot:{
aspect:"spline"
},
//...... legend, preview...
"scale-x":{
"format":"%v",
"zooming":true,
"label":{
"id": "xlabel",
"text":"X",
"margin-top":100
},
"item":{
"auto-align":true,
"maxChars":10
},
"tick":{
"line-color":"black",
"line-width":"2px",
"size":8
}
},
"scale-y":{
"zooming":true,
"decimals":0,
"label":{
"id": "ylabel",
"text":"Y",
"margin-top":100
}
},
series: [
{ "values": [
[1,10],
[2,20],
[3,50],
[4,60]
]
},
{ "values": [
[1,3],
[2,7],
[3,15],
[4,30],
[5,70],
[3.2,25]
]
}
]
};
我已经修改了图表以添加绘图等。但是,尝试动态修改 X 轴和 Y 轴的标签时出现错误。我正在使用 JQuery 包装器,并根据更新对象我这样做:
$('#myChart').updateObject({
"type": "label",
"data": {
"id": "xlabel",
"text": "My new label"
}
});
但这引发了一个错误:Uncaught TypeError: Cannot read property 'length' of undefined
这部分(我知道它是最小化的,除非你开发 zingchart,否则不会有太大意义):
for (z = 0, b = p.length; z < b; z++) {
在case "updateobject":
不确定我是否正确使用了对象更新,但这就是文档中它的工作方式。我可能缺少任何想法?
编辑:我无法在这个 jsfiddle 中重现发病率,但我也无法让它工作。
编辑2:
我认为它涉及到这一点,它将p
设置为undefined
:
case "updateobject":
r = n.BY(e[ZC._[3]]);
if (r && e.data) {
r.G["objects.updates"] = []; //G = "label"
G = e.type || "label"; // e = Object {type: "label", data: Object}
p = r.o[G + "s"]; // p = undefined, r = e {b: undefined, M9: "zcgraph", MW: "linegraph", o: Object, G: Object…}
r.o
是:
o: Object
background-color: "#ffffff"
height: 502
legend: Object
plot: Object
plotarea: Object
preview: Object
scale-x: Object
scale-y: Object
series: Array[2]
tween: null
type: "line"
width: 755
x: 0
y: 0
__proto__: Object
此演示展示了UpdateObject
工作的示例:
var myConfig = {
'type':'line',
'series':[
{
'values':[11,26,7,44,11]
}
],
'labels':[
{
'id':'label1',
'text':'Label 1',
'x':50,
'y':50,
'background-color':'#f90',
'padding':5
},{
'id':'label2',
'text':'Label 2',
'x':150,
'y':50,
'background-color':'#f09',
'padding':5
}
],
'shapes':[
{
'id':'shape1',
'x':100,
'y':100,
似乎会找到labels
下的物体(这就是为什么我在p = r.o[G + "s"]
的+"s"
之前看到的原因)。这可能意味着我使用了错误的方法修改"scale-x"内的标签。
$("#myChart").modify({
"data": {
"scale-x":{
"label":{
"id": "xlabel",
"text":"My new label",
}
}
}
});