我正在尝试更新我的情节图。
以下是我尝试过的事情。
这是我的数据集
var scatter_data = [{
"product_id": 1,
"color": "#ff0000",
"text": "Size :14",
"y": 4,
"x": 6,
"z": 3,
"size": 14
}, {
"product_id": 2,
"color": "#FFFFFF",
"text": "Size :38",
"y": 5,
"x": 4,
"z": 4,
"size": 38
}, {
"product_id": 3,
"color": "#00ff00",
"text": "Size :20",
"y": 3,
"x": 5,
"z": 4,
"size": 20
}, {
"product_id": 4,
"color": "#FFFFFF",
"text": "Size :31",
"y": 6,
"x": 0,
"z": 1,
"size": 31
}, {
"product_id": 5,
"color": "#00ff00",
"text": "Size :20",
"y": 0,
"x": 5,
"z": 1,
"size": 20
}, {
"product_id": 6,
"color": "#ff0000",
"text": "Size :18",
"y": 6,
"x": 1,
"z": 5,
"size": 18
}, {
"product_id": 7,
"color": "#FFa500",
"text": "Size :15",
"y": 0,
"x": 4,
"z": 2,
"size": 15
}, {
"product_id": 8,
"color": "#00ff00",
"text": "Size :13",
"y": 2,
"x": 1,
"z": 1,
"size": 13
}, {
"product_id": 9,
"color": "#FFFFFF",
"text": "Size :11",
"y": 3,
"x": 0,
"z": 1,
"size": 11
}, {
"product_id": 10,
"color": "#FFa500",
"text": "Size :32",
"y": 4,
"x": 2,
"z": 2,
"size": 32
}, {
"product_id": 11,
"color": "#0000ff",
"text": "Size :30",
"y": 1,
"x": 0,
"z": 1,
"size": 30
}, {
"product_id": 12,
"color": "#0000ff",
"text": "Size :39",
"y": 3,
"x": 4,
"z": 3,
"size": 39
}, {
"product_id": 13,
"color": "#FFFFFF",
"text": "Size :33",
"y": 2,
"x": 2,
"z": 4,
"size": 33
}, {
"product_id": 14,
"color": "#ff69b4",
"text": "Size :21",
"y": 0,
"x": 6,
"z": 6,
"size": 21
}, {
"product_id": 15,
"color": "#FFa500",
"text": "Size :34",
"y": 4,
"x": 4,
"z": 2,
"size": 34
}, {
"product_id": 16,
"color": "#FFa500",
"text": "Size :28",
"y": 0,
"x": 0,
"z": 2,
"size": 28
}, {
"product_id": 17,
"color": "#ff69b4",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}, {
"product_id": 18,
"color": "#00ff00",
"text": "Size :21",
"y": 0,
"x": 5,
"z": 2,
"size": 21
}, {
"product_id": 19,
"color": "#ff0000",
"text": "Size :32",
"y": 6,
"x": 6,
"z": 4,
"size": 32
}, {
"product_id": 20,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 6,
"z": 1,
"size": 16
}, {
"product_id": 21,
"color": "#0000ff",
"text": "Size :39",
"y": 1,
"x": 4,
"z": 2,
"size": 39
}, {
"product_id": 22,
"color": "#FFa500",
"text": "Size :24",
"y": 2,
"x": 4,
"z": 4,
"size": 24
}, {
"product_id": 23,
"color": "#0000ff",
"text": "Size :25",
"y": 5,
"x": 1,
"z": 0,
"size": 25
}, {
"product_id": 24,
"color": "#FFFFFF",
"text": "Size :35",
"y": 0,
"x": 6,
"z": 4,
"size": 35
}, {
"product_id": 25,
"color": "#ff0000",
"text": "Size :29",
"y": 4,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 26,
"color": "#FFa500",
"text": "Size :26",
"y": 2,
"x": 0,
"z": 3,
"size": 26
}, {
"product_id": 27,
"color": "#0000ff",
"text": "Size :27",
"y": 2,
"x": 5,
"z": 5,
"size": 27
}, {
"product_id": 28,
"color": "#ff0000",
"text": "Size :15",
"y": 2,
"x": 5,
"z": 2,
"size": 15
}, {
"product_id": 29,
"color": "#ff69b4",
"text": "Size :27",
"y": 3,
"x": 1,
"z": 4,
"size": 27
}, {
"product_id": 30,
"color": "#FFFFFF",
"text": "Size :16",
"y": 5,
"x": 6,
"z": 5,
"size": 16
}, {
"product_id": 31,
"color": "#00ff00",
"text": "Size :24",
"y": 4,
"x": 5,
"z": 6,
"size": 24
}, {
"product_id": 32,
"color": "#FFa500",
"text": "Size :22",
"y": 5,
"x": 6,
"z": 6,
"size": 22
}, {
"product_id": 33,
"color": "#ff0000",
"text": "Size :12",
"y": 4,
"x": 0,
"z": 4,
"size": 12
}, {
"product_id": 34,
"color": "#ff0000",
"text": "Size :33",
"y": 0,
"x": 3,
"z": 1,
"size": 33
}, {
"product_id": 35,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 0,
"z": 1,
"size": 16
}, {
"product_id": 36,
"color": "#00ff00",
"text": "Size :32",
"y": 2,
"x": 5,
"z": 2,
"size": 32
}, {
"product_id": 37,
"color": "#ff0000",
"text": "Size :27",
"y": 2,
"x": 6,
"z": 6,
"size": 27
}, {
"product_id": 38,
"color": "#FFFFFF",
"text": "Size :20",
"y": 3,
"x": 4,
"z": 0,
"size": 20
}, {
"product_id": 39,
"color": "#FFa500",
"text": "Size :27",
"y": 6,
"x": 0,
"z": 3,
"size": 27
}, {
"product_id": 40,
"color": "#FFFFFF",
"text": "Size :16",
"y": 1,
"x": 3,
"z": 3,
"size": 16
}, {
"product_id": 41,
"color": "#0000ff",
"text": "Size :29",
"y": 2,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 42,
"color": "#ff69b4",
"text": "Size :23",
"y": 6,
"x": 2,
"z": 3,
"size": 23
}, {
"product_id": 43,
"color": "#00ff00",
"text": "Size :10",
"y": 3,
"x": 1,
"z": 5,
"size": 10
}, {
"product_id": 44,
"color": "#FFa500",
"text": "Size :35",
"y": 0,
"x": 2,
"z": 4,
"size": 35
}, {
"product_id": 45,
"color": "#FFFFFF",
"text": "Size :21",
"y": 3,
"x": 3,
"z": 6,
"size": 21
}, {
"product_id": 46,
"color": "#FFa500",
"text": "Size :32",
"y": 2,
"x": 0,
"z": 6,
"size": 32
}, {
"product_id": 47,
"color": "#ff0000",
"text": "Size :24",
"y": 5,
"x": 6,
"z": 3,
"size": 24
}, {
"product_id": 48,
"color": "#FFFFFF",
"text": "Size :30",
"y": 0,
"x": 1,
"z": 6,
"size": 30
}, {
"product_id": 49,
"color": "#ff69b4",
"text": "Size :33",
"y": 3,
"x": 5,
"z": 5,
"size": 33
}, {
"product_id": 50,
"color": "#ff0000",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}]
1）这是我创建图表的代码
$(document).ready(function(){
trace = [];
data = []
$.each(scatter_data, function(index, value){
// console.log("here"+value);
index ++;
trace[index] = {
x : [value.x],
y: [value.y],
z:[value.z],
text:["Size: "+value.size],
mode : 'markers',
marker : {
color : [value.color],
size : [value.size],
symbol : 'circle',
line: {
color : 'rgb(204,204,204)',
width:1
},
opacity:0.9,
},
type: 'scatter3d',
name : 'category'+index,
title: 'title'+index
};
console.log(trace[index]);
data.push(trace[index]);
});
// var data = [trace[1],trace[2],trace[3]];
var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0
}, showlegend : true};
Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );
// There exist a event to click on the data point
// var graphDiv = document.getElementById('plotly-div')
// graphDiv.on('plotly_click', function(data){
// // do something using the event data
// console.log(data);
// });
}）;
现在我有一个表单，通过它我可以编辑数据并获取数据来更新图表。
for(i=1;i<=50;i++){
trace_no.push(i);
tempx.push($("#x-"+i).val());
tempy.push($("#y-"+i).val());
tempz.push($("#z-"+i).val());
tempsize.push($("#size-"+i).val());
tempcolor.push($("#rgb-combined-"+i).spectrum('get').toHexString());
temptext.push("size : "+$("#size-"+i).val());
}
var update = {
x : [tempx],
y : [tempy],
z : [tempz],
size : [tempsize],
'marker.color' : [tempcolor],
text : [temptext]
}
Plotly.restyle('plotly-div', update, trace_no)
图表不反映变化，所有图例都以1种特定颜色着色
提前致谢！
答案 0 :(得分：0)
所以我终于在图书馆作者的帮助下找到了解决方案。
这是正确的语法：
var update = {
x : [[1],[2],[3],[4],[5]],
y : [[1],[2],[3],[4],[5]],
z : [[1],[2],[3],[4],[5]],
size :[[12],[13],[14],[15],[16]],
'marker.color' : [["#001"],["#005"],["#0f0"],["#f00"],["#00f"]],
text : "size"
}
Plotly.restyle('myDiv', update, [0,1,2,3,4]);
每条痕迹都必须有一个单独的数组。