如何使用 Plotly 为条形图中的每个条添加目标线？

Question

我正在使用 Grafana 的 Plotly Panel 插件，并想绘制几个变量的设定值和实际值。

我可以生成如下图表：

使用以下脚本：

var trace0 = {
    x: ['A', 'B', 'C'],
    y: [100, 40, 130],
    type: 'bar',
    name: 'Setpoint'
    };
var trace1 = {
    x: ['A', 'B', 'C'],
    y: [87, 46, 112],
    type: 'bar',
    name: 'Actual'
};

return {data:[trace0, trace1],layout:{title:'Control'}};

这行得通。但是，我认为将“设定值”作为一条线覆盖在每个“实际”条上会更紧凑，同时也会使图表更直观。这是我用 Google Sheets + Paint 制作的图表模型：

我还查看了子弹图，看看是否可以将其用于此目的，但不知道如何使用。

Answer 1

主要问题是很难显示仅设置点栏的最顶部。我认为获得所需显示的最佳选择是使用 Shapes，您可以阅读 here，并使用基于图表 x 和 y 坐标的水平线绘制设定值条。

每条线由参数x0, y0, x1, y1定义，其中(x0, y0)是线的起始坐标，(x1, y1)是结束坐标。

对于带有分类 x 轴的条形图，x 坐标实际上直接映射到 0、1、2...。这意味着我们可以使用计数器 i 来循环通过设置点条的值数组，使线从 x0 = i - width / 2 延伸到 x0 = i + width / 2，并将 y0 和 y1 设置为设置点条的 y 值。默认条的宽度为 0.8，因此您可以使线条的宽度稍长（我选择 0.9）以尽可能接近您的输出。

我定义了数组来保存您的条形类别、设置点条形值和设置点条形宽度（我们可以将其视为我们正在使用的线条形状的长度）。希望这意味着我的解决方案更具通用性。

categories = ['A', 'B', 'C']
setPointValues = [100, 40, 130]
setPointWidth = 0.9

var trace1 = {
    x: categories,
    y: [87, 46, 112],
    type: 'bar',
    marker: {
      color: 'orange'
    },
    name: 'Actual'
};
setPointLines = []
for (i=0; i<categories.length; i++){
  setPointLines.push(
    {
      type: 'line',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'y',
            x0: i-setPointWidth/2,
            y0: setPointValues[i],
            x1: i+setPointWidth/2,
            y1: setPointValues[i],
            line: {
                color:'blue',
                width: 2
            }
    }
  )
}

var layout = {
  title: 'Control',
  shapes: setPointLines
};

var data = [trace1];

return {data:[trace1],layout:{title:'Control'}};

如何使用 Plotly 为条形图中的每个条添加目标线？

How do I add a target line for each bar in a bar chart with Plotly?

plotly

bar-chart

plotly.js