Highcharts格式标签分组堆积条形图与$ k，M代表货币，'hrs'代表时间

Question

我正在使用highcharts。我有一个分组堆积条形图，其中包含两个系列的收入和小时数，其中已计费/不计费作为堆叠系列。我希望条形图上的标签显示为K / M缩短为k，对于货币条显示相同（但在数字前面加上'$'）。

我设法在y轴上执行此操作，但我无法在每个条形图上的标签（以及顶部的总标签）以及工具提示上实现此目的。

成品应该：

1. RHS yAxis，其中M为数千，k为数百万。现在它从k开始并保持这样。我希望成千上万M和$，因为它可以达到数百万的值。我希望前面有$（就像它一样）。

2. LHS轴现在看起来不错，但如果数据达到100万或更多，则会出现同样的问题。它应该像没有$符号的第1点一样工作。

3. 每个条形图上的标签的格式应与其各自的y轴（k和M以及k的格式相同，只有M和About，但小时为一位小数。）

4. 工具提示的格式也应与第3点中的标签类似。

这是显示图表的jsfiddle。我似乎无法找到这样的例子。感谢您的任何建议。

Answer 1

这是一个很好的问题。我做了一个小提琴（http://jsfiddle.net/brightmatrix/uy81h3os/3/），解决了你的大多数问题，以及一些我希望你会发现有用的建议。

首先，对于您的轴标签，您可以使用每个轴中formatter内的labels属性来定义您希望如何显示它们。为了您的收入，我添加了前缀“$”;我没有包括一个小时。

我在每个轴的Highcharts.numberFormat()中使用formatter函数。这将为您的数字添加千位分隔符（逗号）并修复小数点（该函数中的第二个参数）。几个小时，你有几小时的小时数，所以我设置的小数位数显示为1.对于收入，我修正了小数位数以显示为0.可以根据需要随意更改这些小数位。

对于K / M标签，我强烈建议将数值固定为数千，并在轴标题中说明（例如，“收入（以千计）”）。这通常是在经济和金融图表中完成的，并将使标签清晰，一致，为您的用户。查看我对您的轴标题文本属性的更改。

这是y轴的完整代码：

yAxis: [{
  title: {
    text: 'Hours (in thousands)'
  },
  labels: {
    formatter: function() {
      return Highcharts.numberFormat(this.value/1000,0) 
    }
  },
  reversedStacks: false,
  stackLabels: {
    enabled: true,
    formatter: function() {
      return Highcharts.numberFormat(this.total,1) 
    }
  },
}, {
  title: {
    text: 'Revenue (in thousands)'
  },
  labels: {
    formatter: function() {
      return '$' + Highcharts.numberFormat(this.value/1000,0) 
    }
  },
  stackLabels: {
    enabled: true,
    formatter: function() {
      return '$' + Highcharts.numberFormat(this.total,0) 
    }
  },
  opposite: true,
  reversedStacks: false
}],

我对你的小提琴做了另一个改变，你会在顶部看到。这会为您的所有数字添加数千个分隔符，因此它们会显示在10,000而不是10 000，就像您之前一样。这是代码：

Highcharts.setOptions({
    lang: { thousandsSep: "," }
});

这是一个全局函数，因此您需要将其直接放在图表代码之前。

我将对您的工具提示格式进行一些研究，并使用更多详细信息编辑此答案。