Plotly.js中相对的barmode标签被重叠时，两根柱子的值都为0。

Question

继续我的旅程 Plotly.js. 我使用的是 相对armode 当两个相反的条形图都有值时，需要显示一些自定义的文本。0. 对于值0的问题，两个条形图的生长方向是一样的，标签是重叠的。

我想过唯一的解决办法就是检查值是否为0的时候 0 并动态地将其改为类似 -0.009 并手动显示正确的值，尽管它实际上是错误的。但这是一个繁琐的解决方案，而且图表一直在为这些值显示小条，这是不可以接受的。

这是我在Codepen上的例子

标签方向可以手动控制吗？谢谢你。

Answer 1

最初的想法

一种解决方案是将每个轨迹的基数参数指定为0，对于负数条，如果数值为0，则使用负数基数。

      const altbase=-1000/3;

      const trace1 = {
        x: xValue,
        y: [FN],
        name: `Model 1`,
        text: `${FN} <br> FN`,
        type: 'bar',
        base: 0,
        textposition: 'outside'
      };
      const trace2 = {
        x: xValue,
        y: [-TN],
        name: 'Model 1',
        text: `${TN} <br> TN`,
        base: altbase,
        type: 'bar',
        textposition: 'outside'
      };

它看起来像 -max_y_lim / 3 导致良好的偏移，这就是 altbase 的用途。

您也可以定义 altbase 作为一个变量，检查是否TN==0。

var altbase = ((TN==0) ? -FP/3 : 0);

UPDATE1: 或者你可以绕过变量，把if语句直接放到trace定义中，如 base: ((TN==0) ? -FP/3 : 0),

UPDATE2: 而一个稍微优雅一点的偏移公式是。

var altbase = ((TN==0) ? -1.4/4*Math.max(FN,TN,TP,FP) : 0);

最后更新

想了想，最好还是一直计算出 altbase 以使其可用于其他潜在的负数条，然后使用if语句来设置该条的 base: 在需要的地方。

      var altbase = -1.4/4*Math.max(FN,TN,TP,FP);

      const trace1 = {
        x: xValue,
        y: [FN],
        name: `Model 1`,
        text: `${FN} <br> FN`,
        type: 'bar',
        base: 0,
        textposition: 'outside'
      };
      const trace2 = {
        x: xValue,
        y: [-TN],
        name: 'Model 1',
        text: `${TN} <br> TN`,
        base: ((TN==0) ? altbase : 0),
        type: 'bar',
        textposition: 'outside'
      };

在此 是在CodePen中实现的。