Highcharts Highchart：轴的背景色

我看到了一个类似的问题

作为回应，它写道，我们可以通过制作一个矩形来获得背景色

我的问题是如何获得轴上所有记号的

x

和

Y

位置。我将需要它，因为我只想在备用日期的背景色

---

谢谢

您是否尝试使用带有背景和

useHTML

标志的

标签。格式化程序

？大概是这样的：

---

下面是一个在第2个和第4个刻度之间着色的快速示例：

var tickStart = 1;
var tickEnd = 3;

$(function () {

   var rect = null;
   function drawRect(chart){
       if (rect){
           rect.element.remove();   
       }        

        var xAxis = chart.xAxis[0];  
        var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
        var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
        rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
        .attr({
           'stroke-width': 0,
           stroke: '#888888',
           fill: '#888888',
           zIndex: 3
        })
        .add();
    }

    $('#container').highcharts({
        chart: {
            events: {
                load: function() {
                    drawRect(this);
                },
                redraw: function(){
                    drawRect(this);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            animation: false,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    });
});

小提琴

---

您是否希望标签仅使用背景色，如：仅在备用日期使用颜色。我不仅希望标签上使用彩色背景，还希望在两天之间的整个轴部分使用彩色背景。如图所示：i40.tinypic.com/5k264h.png在这种情况下，您需要按照您所说的绘制矩形。要获取开始/结束值，请使用

chart.x/yAxis[0].toPixels（）

，请参阅：谢谢，这很有帮助：）此解决方案的唯一问题是，如果调整图表大小，绘制的矩形将位于错误的位置。您将需要实现redraw（）函数并移动矩形。好东西标记！我注意到您正在删除它并重新绘制它-我只需调用.attr（）方法并更新x和y坐标即可使它正常工作。也许会快一点，但你的要干净得多。

.hc-label {
  background-color: red;
  padding: 0px 5px;
  color: yellow;
}

var tickStart = 1;
var tickEnd = 3;

$(function () {

   var rect = null;
   function drawRect(chart){
       if (rect){
           rect.element.remove();   
       }        

        var xAxis = chart.xAxis[0];  
        var pixStart = xAxis.toPixels (xAxis.tickPositions[tickStart], false);
        var pixEnd = xAxis.toPixels (xAxis.tickPositions[tickEnd], false);
        rect = chart.renderer.rect(pixStart, chart.chartHeight - xAxis.bottom, pixEnd - pixStart , 25, 00)
        .attr({
           'stroke-width': 0,
           stroke: '#888888',
           fill: '#888888',
           zIndex: 3
        })
        .add();
    }

    $('#container').highcharts({
        chart: {
            events: {
                load: function() {
                    drawRect(this);
                },
                redraw: function(){
                    drawRect(this);
                }
            }        
        },
        xAxis: {
        },

        series: [{
            animation: false,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    });
});