Grafana新手求助：用什么图表/插件可生成给定表格的双指标对比示意图？

你要的效果完全可以不用额外找特殊插件，两种实现路径都可以满足自定义配色的需求： #

方案1：原生条形图面板实现（无需安装插件） #

你的现有表格结构不用调整，直接按以下步骤配置即可：

• 首先在面板的Transform tab 新增「计算字段」规则：
  • 计算逻辑：q_point * -1，输出字段命名为q_point_negative，用来实现左侧条形的负向展示
• 打开条形图（Bar Chart）配置页：
  • 维度设置：X轴绑定Title字段作为分类维度，数值列绑定q_point_negative和a_point两个字段
  • 样式设置：条形方向切换为水平，关闭堆叠模式
  • 轴设置：自定义X轴的最小/最大值匹配你的数值范围，X轴数值格式可以配置为自动忽略负号，保证左侧条形的数值显示为正数
  • 配色设置：在「系列覆盖（Series override）」中分别给两个数值系列指定自定义颜色即可

方案2：Apache ECharts 插件实现（灵活度更高） #

如果需要更精细的样式控制，可以安装Grafana官方认证的社区插件Apache ECharts，直接通过配置代码生成完全匹配需求的图表，参考配置片段如下：

option = {
  tooltip: { trigger: 'axis' },
  yAxis: {
    type: 'category',
    data: data.series[0].fields.Title.values,
  },
  xAxis: {
    type: 'value',
    axisLabel: { formatter: Math.abs }
  },
  series: [
    {
      name: 'q_point',
      type: 'bar',
      data: data.series[0].fields.q_point.values.map(val => -val),
      itemStyle: { color: '#2E7DFF' } // 自定义q_point配色
    },
    {
      name: 'a_point',
      type: 'bar',
      data: data.series[0].fields.a_point.values,
      itemStyle: { color: '#52C41A' } // 自定义a_point配色
    }
  ]
}

可以直接修改配置中的color属性、间距、圆角等参数，完全自定义图表效果。

内容的提问来源于stack exchange，提问作者ivoruJavaBoy