将背景颜色设置为 HighChart xAxis 标签答案

【问题标题】：Set background color to HighChart xAxis labels将背景颜色设置为 HighChart xAxis 标签
【发布时间】：2012-03-25 09:14:41
【问题描述】：

如何将背景颜色设置为 HighChart xAxis 标签。

我尝试了以下但没有运气

x轴：{ 类别：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月” ], 标签： { 旋转：90，风格： { 颜色：'#89A54E', 填充：'#000', 背景颜色：'#FCFFC5'， } }, 背景颜色：'#FCFFC5' }

提前致谢纳文

【问题讨论】：

以防万一，有可能，请参阅that 答案。

标签： javascript jquery highcharts

【解决方案1】：

你不能。 xAxis 对象没有属性 backgroundColor。

【讨论】：

是否可以在悬停时显示 xAxis 的全文？注意：默认情况下，文本限制为 15 个字符
不应接受此答案。是的，xAxis 对象没有该属性，但是很容易在带有标志 useHTML 和 formatter 的轴标签上设置背景颜色

【解决方案2】：

@dgw 的回答不正确。

这是可能的：您可以设置使用 HTML 标志并添加自己的 css 样式。

See this answer

【讨论】：

【解决方案3】：

虽然 @dgw 指出 x 轴没有 backgroundColor 属性在技术上是正确的，但您可以使用其他替代方法来实现此效果。

Highcharts.js - Background color of axis only：这篇博文中接受的答案展示了如何使用 renderer.rect() 函数在图表底部的 x 轴标签后面绘制一个彩色框。
How to format column chart data labels：我在这篇文章中的回答展示了如何绘制一个类似的矩形，但基于图表的当前尺寸与固定值。
Highchart: Background color of Axis：@dyingangel666 引用的这篇文章中的答案还显示了如何为 x 轴上的某些间隔设置背景。我使用@Mark 的答案作为我自己解决方案的灵感。

我希望这些资源对遇到此问题的其他人有所帮助。

【讨论】：

【解决方案4】：

 xAxis: {
        labels: {
            useHTML: true,
            formatter: function () {
                return '<span class="xaxis-label">' + (this.value).toFixed(2) + '</span>';
            }
            
        }
    }

然后在css文件中

.xaxis-label {
background-color: #fff;
padding: 0px 5px;
font-size: 15px;
}

成功了。

【讨论】：

【解决方案5】：

我认为这个问题的答案可能有点棘手，但这里是我为我修复它所遵循的步骤。

将图表背景设置为您希望 xAxis 和 yAxis 具有的颜色

 chart: {
      backgroundColor: '#eee',
         },

然后将多边形系列设置为具有所需图表背景的最大 y 轴和 x 轴图表

 series: [
                    {
                        name: 'Extremely Bad',
                        type: 'polygon',
                        color: '#fff', // desired background for plot area
                        zIndex: 0,
                         data: []
                    },
                    {
                    name: '',
                    type: 'scatter',  // desired series
                    data: [],

                   }]

并将 z 索引添加到 xAxis 和 y 轴以显示网格线

【讨论】：