突出显示 plotly.js boxplot 中的一个值

Posted 2023-02-18

【中文标题】突出显示 plotly.js boxplot 中的一个值

【英文标题】：highlight one value in plotly.js boxplot

【发布时间】：2022-01-17 07:34:50

【问题描述】：

我有一个带有许多值数组的绘图箱线图，一切正常，但我想突出显示一个值。

这是我的代码

var ebitda_margin_plotly = 
                      x: data.plotly_data.ebitda_margin,
                      type: 'box',
                      name: 'E-MARGIN',
                      marker: 
                      color: 'rgba(255, 202, 3, 0.7)',
                      outliercolor: 'rgba(219, 64, 82, 0.6)',
                      line: 
                        outliercolor: 'rgba(219, 64, 82, 1.0)',
                        outlierwidth: 2
                      
                    ,
                    boxpoints: 'suspectedoutliers'
                    ;

                    var ebitda_margin_config = 
                    responsive: true,
                    modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d'],
                    displaylogo: false,
                    autosizable: true

                    
                     var layout_ebitda_margin = 
                      title: ('EBITDA MARGIN: ' + data.data.ebitda_margin + "%")
                    ;
Plotly.newPlot('ebitda_margin_plotly', [ebitda_margin_plotly], layout_ebitda_margin,ebitda_margin_config);

我怎样才能添加这样的蓝色线来代表我的自定义值？在这种情况下，我有 11.7% 来自后端

【参考方案1】：

好的，我找到了一个解决方案，其实很简单

只需要添加到布局形状

var layout_ebitda_margin = 
                      title: "EBITDA MARGIN",
                      height: 320,
                      xaxis: 
                        rangeslider: 
                                  ,
                    yaxis: 
                      showticklabels: false,
                        fixedrange: true
                    ,
                    hovermode: 'y unified',
                    shapes: [
                  
                      type: 'line',
                      x0: data.data.ebitda_margin,
                      y0: -1,
                      x1: data.data.ebitda_margin,
                      y1: 1,
                      line:
                          color: 'rgb(255, 0, 0)',
                          width: 1,
                          dash:'dot'
                       ]
                    ;