使用 HighCharts 的格式化程序

Question

我在创建数据标签时使用自定义格式化程序：

formatter: function() {
   return this.point.name + '<br>' + this.point.id;
}

产生：

SomeName

SomeID

虽然顶线似乎相对于我的段/块居中，但底线却没有。更一般地说，是否可以分别格式化顶行和底行？

我希望顶线和底线都居中，但顶线明显大于底线。当我在样式、数据标签、系列下编辑 fontSize 属性时，它会影响两行。

Answer 1

您可以在格式化程序函数中添加额外的 html 元素，然后根据自己的喜好设置样式。确保你有 useHTML:true。例如：http://jsfiddle.net/qqqpmpLm/

CSS:

.labelName {
  font-size: 20px;
}
.label {
  color:red;
  text-align:center;
}

数据标签：

  dataLabels: {
    enabled: true,
    useHTML: true,
    formatter: function() {
      return '<div class="label"><span class="labelName">'+this.point.name + '</span><br>' + this.point.id + '</div>'
    }
  },

使用 HighCharts 的格式化程序

Formatter Using HighCharts

html

javascript

formatting

heatmap

highcharts