Highcharts单个水平堆叠条形图，其中包含数据名称（标签）和％总是显示，数据编号和系列名称显示在mousehover上 [英] Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover

问题描述

是否可以合并以下内容？

Is it possible to combine the following?

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

• 具有条形段的单个水平堆叠条形图

小提琴2 的以下功能（ answer ed by aus_lacy ）：

Combined with the following features of Fiddle 2 (answered by aus_lacy):

始终在细分栏上显示：

• 数据名称（标签）（ic apples ， pears ，...）


• 百分比（可能时计算： 50％ ， 50％ ，
  

• Data names (labels) (i.c. "apples", "pears",...)
• Percentages (calculated if possible: "50%","50%",...)

显示在鼠标垫上：

• 原始数据编号 15 ， 15 。）


• 系列名称/说明（ic 浏览器共享 ）

• Original data numbers (i.c. "15","15",...)
• Series name/description (i.c. "Browser share")

几乎但不完全：

在 小提琴3 （ answer ed by jlbriggs ），但有数据名称 缺少，我找不到改变系列名称的方法。此外，这是一个水平条形图，但不是单个堆叠。

An example of a horizontal bar chart with "percentages" always shown, and "original data numbers" on mousehover can be found in Fiddle 3 (answered by jlbriggs), but there the "data names" are lacking, and I can't find a way to change the "series name". Further more: this is a horizontal bar chart, but this is not a single stacked one.

任何帮助将非常感谢，非常感谢。

Any help would greatly be appreciated, many thanks.

推荐答案

同样，这是一个简单的修改Highcharts属性， snippet：

Again it's a simple modification of the Highcharts attributes in particular this small snippet:

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',
           },
        },

  },

我认为此代码段是您之前是什么？

I think this snippet is what you are after?

这篇关于Highcharts单个水平堆叠条形图，其中包含数据名称（标签）和％总是显示，数据编号和系列名称显示在mousehover上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！