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

xam8gpfp  于 2023-10-20  发布在  Highcharts
关注(0)|答案(6)|浏览(139)

如何将背景色设置为HighChart xAxis标签。
我试过下面的,但没有运气。
xAxis:{ categories:'Jan','Feb',' Mar','Apr',' May','Jun',' Jul','Aug',' Sep','Oct',' Nov','Dec'],标签:{旋转:90、款式:{颜色:'#89A54E',填充:'#000',backgroundColor:'#FCFFC5',} },backgroundColor:'#FCFFC5' }
提前感谢Navin

gk7wooem

gk7wooem1#

@dgw的答案是不正确的。
这是可能的:你可以设置使用HTML标志并添加你自己的CSS样式。
See this answer

bjp0bcyl

bjp0bcyl2#

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

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

aamkag61

aamkag613#

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

很管用。

gz5pxeao

gz5pxeao4#

我认为这个问题的答案可能有点棘手,但这里是我遵循的步骤来修复它。
将图表背景设置为您希望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轴以显示网格线

pokxtpni

pokxtpni5#

在标签对象中仅使用useHtml:true { useHTML:true,formatter(瓦尔:const category = 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>`;
        },
      }
}
gg0vcinb

gg0vcinb6#

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

相关问题