使用plotlyjs和vue在箱线图上放置点

Question

我试图将点放置在箱线图上，但是我的尝试导致将点放置在箱线图旁：

 data: [
        {
          x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
          type: "box",
          name: "Set 1"
        },
        {
          x: [5],
          name: 'My special marker',
          text: 'Some really interesting hover info',
          marker: {
            size: 5
          }
        },
      ],
      layout: {
        title: 'Revenues',
        font:{
        size:10
        },
        margin: {
          l: 0,
          r: 0,
          b: 15,
          t: 25,
          pad: 0
        },
        height: 90,
        dragmode: "pan"
      },

是否可以使用vue-plotly库将该点放置在箱线图上？

在这里我记下了这个问题：https://codesandbox.io/s/vue-plotly-delsw?file=/src/App.vue

编辑：为了获得理想的结果，我需要将该附加点放在图表顶部，如下所示：

Answer 1

一种解决方案是将点标记的size和条形图的width设置为彼此重叠。例如：

      data: [
        {
          x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
          type: "box",
          name: "Set 1",
          width: 30,
        },
        {
          x: [5],
          name: "My special marker",
          text: "Some really interesting hover info",
          marker: {
            size: 30
          }
        }
      ],