Question

当我单击任何一个条形图时，我都有一个分组的水平条形图，它应突出显示同一轴的第二个条形图。

当我单击橙色条时，它也应突出显示相应的轴绿色条。

trace1 = {
    y: ["A","B","C","D","E"], 
    x: [40, 78, 15, 10, 80], 
    name: 'SF Zoo', 
    marker: {color: '#ffa038'},
    type: 'bar',
    orientation: 'h',
    stackgaps: 'interpolate',
    offsetgroup: "1",
    uid: "a76d02"
};

trace2 = {
    y: ["A","B","C","D","E"], 
    x: [20, 14, 23, 44, 20], 
    name: 'LA Zoo',
    marker: {color: 'rgb(76,119,93)'},
    type: 'bar',
    orientation: 'h',
    offsetgroup: "2",
    uid: "f37dc3"
};

barGraph = {
  data: [this.trace1, this.trace2],
  layout : {offsetgroup:true,legend:{orientation:'h'},clickmode: 'event+select', title: 'Sample POC', barmode:'group',height:500,
  yaxis:{category:true,
         "autorange": true,
          automargin:true
          },
  fill: "tonextx",
  xaxis:{automargin:true,
         showgrid:false,
         "autorange": true
       }
     }

Answer 1

可以通过进行以下更改来实现。

<plotly-plot [data]="barGraph.data" [layout]="barGraph.layout" (selected)="pointsSelect($event)" [style]="{overflow:visible}" divId="test"></plotly-plot>

pointsSelect(event){
    var points = event.points;
    if(event && event.points) {
        this.pts = event.points.map(p => p.pointNumber);
        PlotlyModule.plotlyjs.restyle("test", 'selectedpoints', [this.pts, this.pts]);
    }

如何在角度绘图分组图中选择条形图或迹线

1 个答案: