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

Question

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

我尝试了以下方法，但没有成功

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

提前致谢 纳文

Answer 1

@dgw 的答案不正确。

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

看这个答案

Answer 2

虽然 @dgw 指出 x 轴没有

backgroundColor

属性在技术上是正确的，但您可以使用其他替代方法来实现此效果。

• Highcharts.js - 仅轴的背景颜色：本文中接受的答案展示了如何使用

  renderer.rect()

  函数在图表底部、x 轴标签后面绘制一个彩色框。
• 如何格式化柱形图数据标签：我在这篇文章中的回答展示了如何绘制类似的矩形，但基于图表的当前尺寸与固定值。
• Highchart：轴的背景颜色：@dyingangel666 引用的这篇文章中的答案还展示了如何为 x 轴中的某些间隔设置背景。我使用@Mark 的答案作为我自己解决方案的灵感。

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

Answer 3

 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 4

我认为这个问题的答案可能有点棘手，但以下是我为我解决这个问题所遵循的步骤。

将图表背景设置为您希望 x 轴和 y 轴具有的颜色

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

                   }]

并向 x 轴和 y 轴添加 z 索引以显示网格线

Answer 5

在标签对象中仅使用 useHtml:true { 使用HTML：true， 格式化程序（值：任意）{ const 类别 = props?.xAxis?.categories;

          const findedItem = category.find(
            (item: any) => item.count === val.value
          );

          
          return `<span
          style="
          padding:2px 4px;
          color: #fff;
          background: #000"

        >
          ${val.value ? formatPrice(val.value) : 0}
        </span>`;
        },
      }
}

Answer 6

你不能。 xAxis 对象没有背景颜色属性。