javascript - 绘制一条垂直线来显示平均值

标签 javascript plotly

所以我正在尝试创建一个水平条形图,其中有一条水平线显示平均值。

到目前为止,我已尝试以下操作:

首先添加我的 barChart 系列(它来自以下数组):

      "series": [
    {
      "value": 100, "label": "F1"
    },
    {
      "value": 25, "label": "F2"
    },
    {
      "value": 30, "label": "Jedi Jeremiah 555"
    },
    {
      "value": 40, "label": "F4"
    },
    {
      "value": 55, "label": "F5"
    },
    {
      "value": 60, "label": "F6"
    },
    {
      "value": 71, "label": "F7"
    },
    {
      "value": 15, "label": "F8"
    },
    {
      "value": 88, "label": "F9"
    },
    {
      "value": 90, "label": "F10"
    }
  ]

它将转换为以下对象的数组:

{name: 'F1', orientation: "h", x: [100], y: ["F1"]}

然后我添加以下系列:

{
    name: 'average organization',
    type: 'scatter',
    x: [60],
    orientation: 'h'
}

这将创建以下图表:

enter image description here

正如您所看到的,只有一个蓝点表示平均值,这不是我正在寻找的结果。

我知道有一些形状,但我希望将其作为图表的一部分,以便您可以选择或取消选择它。

有人知道如何实现这一目标吗?

最佳答案

如果您提供 jsFiddle 或 codePen 或其他示例来直接执行它,将会有所帮助:-) 我认为问题是,你想要一条垂直线,但设置 orientation: 'h'到最后一个“平均组织”对象,而不是使用 orientation: 'v' .

我在 jsFiddle 中重现了您的示例并添加了所需的行为: https://jsfiddle.net/vepycde0/

希望有帮助:-)

编辑:要隐藏 yAxis 上的“0”,请使用 y: [""]如 jsFiddle 所示:https://jsfiddle.net/vepycde0/1/

关于javascript - 绘制一条垂直线来显示平均值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40760000/

相关文章:

r - 如何在绘图中手动将线型分配给线条

javascript - 在 Angular 4 中 Plotly 找不到带有 ngIf 的 HTML 元素

javascript - 我如何从 ckeditor 中删除链接工具栏?

javascript - SignalR 错误无法将类型 'System.Threading.Tasks.Task<object>' 隐式转换为 'string'

javascript - 获取 iframe 中 html 的鼠标悬停元素

javascript - Bootstrap 表特定列的最后一行

javascript - 如何将plotly.js应用到现有的svg组<g>作为目标而不是应用到目标<div>元素?

python - B(十亿)而不是 python 中的 G(千兆)plotly customdata [SI 前缀 d3]

RMarkdown 和 ggplotly

javascript - 如何对对象数组进行分组和求和?