在Plotly.js中动态切换形状的可见性

问题描述

我正在创建一个不错的plotly.js形状数组。我根据形状的类型添加了一个自定义数据属性'custType'：'1'或'custType'：'2'。每个形状类型的数量将不一致，因此我需要能够动态更新可见性。

我尝试了这个...无济于事

var update = [];
for(x=0; x<data.layout.shapes.length; x++){
        if(data.layout.shapes[x].custType == '1'){
                    update.push({'shapes[' + x + '].visible':false})
            }               
}
                
Plotly.relayout('main',update);

解决方法

update必须是对象而不是数组，例如

{
  "shapes[0].visible": false,"shapes[1].visible": false
}

请参见下面的代码段。

const trace = {
  x: [1,2,3,4],y: [10,15,13,17],type: 'scatter'
};

const data = [trace];

const layout = {
    shapes: [
        {
            type: 'rect',x0: 1,x1: 2,y0: 10,y1: 12,fillcolor: '#d3d3d3',line: {
                width: 0
            }
        },{
            type: 'rect',x0: 3,x1: 4,y0: 12,y1: 14,line: {
                width: 0
            }
        }
    ]
}

Plotly.newPlot('myDiv',data,layout);

function update() {
  const update = {};
  for(let i = 0; i < layout.shapes.length; i++){
    update['shapes[' + i + '].visible'] = false;
  }
  Plotly.relayout('myDiv',update); 
}

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
  <button type="button" onClick="update()">Update</button>
</body>

javascript plotly.js

在Plotly.js中动态切换形状的可见性

问题描述

解决方法

相关问答