Highcharts柱形图格式

Question

我们得到了模型：

我正在查看 highcharts，但我不知道我是否可以做到这一点。我要特别寻找的是 x 轴类别上方的自定义 string/value。

据我所知，x 轴类别只是一个字符串数组，所以我不能使用 html 或任何东西，甚至

Answer 1

来自文档：

HTML in Highcharts

Texts and labels in Highcharts are given in HTML, but as the HTML is parsed and rendered in SVG, only a subset is supported. The following tags are supported: , , , ,  , . Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

Most places where text is handled in Highcharts, it is also followed by an option called useHTML. When this is true, the text is laid out as HTML on top of the chart. This allows for full HTML support and can be a good idea if you want to add images in your labels, tables in your tooltip etc.

因此，您可以在类别数组中使用 HTML 标签，例如：

  xAxis: {
    ...,
    categories: [
      '<span style="font-size: 16px; color: red;">-22.5%</span><br>CLIENT<br>CALLS',
      ...
    ]
  }

现场演示： http://jsfiddle.net/BlackLabel/kLu7rtea/

文档： https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

API参考：

https://api.highcharts.com/highcharts/xAxis.categories

https://api.highcharts.com/highcharts/xAxis.labels.useHTML

Highcharts柱形图格式

Highcharts column chart formatting

highcharts