Highcharts 单个水平堆叠条形图，始终显示数据名称(标签）和 %-年龄，并在鼠标悬停时显示数据编号和系列名称

Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover

本文关键字：显示 数据 年龄 鼠标 悬停 系列 编号 单个 水平 标签 Highcharts      更新时间：2023-09-26

是否可以组合以下内容？

小提琴 1（由 mäksä 回答）作为主模板：

  • 带条段的单个水平堆叠棒材

结合小提琴2的以下功能（由aus_lacy回答）：

在条形段上始终可见：

  • 数据名称（标签）（即"apples"、"pears",...）
  • 百分比（如果可能，计算："50%"、"50%",..."）

鼠标悬停时显示：

  • 原始数据编号（即"15"、"15",...）
  • 系列名称/描述（i.c. " Browser share"）

几乎但不完全是：

在 Fiddle 3 中可以找到一个始终显示"百分比"的水平条形图示例，鼠标悬停上的"原始数据数字"（由 jlbriggs 回答），但缺少"数据名称"，我找不到更改"系列名称"的方法。此外：这是一个水平条形图，但这不是一个单一的堆叠条形图。

任何帮助将不胜感激，非常感谢。

同样，这是对Highcharts属性的简单修改，特别是这个小片段：

bar: {
        dataLabels: {
           enabled: true,
           distance : -50,
           formatter: function() {
                 var dlabel = this.series.name + '<br/>';
                 dlabel += Math.round(this.percentage*100)/100 + ' %';
                 return dlabel
           },
           style: {
                 color: 'white',
           },
        },
  },

我认为这个片段是你所追求的？

相关文章：