Question

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

我试过以下但没有运气

xAxis：{ 类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec' ] 标签： { 轮换：90，风格：{ 颜色：'＃89A54E'，填充：'＃000'， backgroundColor：'＃FCFFC5'， } }， backgroundColor：'＃FCFFC5' }

先谢谢纳文

Answer 1

@dgw的答案不正确。

可能：您可以设置使用HTML标记并添加自己的CSS样式。

See this answer

Answer 2

 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;
}

做到了。

Answer 3

你做不到。 xAxis对象没有属性backgroundColor。

Answer 4

尽管@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的答案作为我自己的解决方案的灵感。

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

Answer 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: [],

                   }]

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

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

5 个答案: