如何仅在Highcharts中存在值时启用打印？

我是海图新手。我最近一直在画海图。我正在使用plotbands打印背景色。如果存在值，则必须对其进行着色；如果不存在值，则不应对其进行着色

例如，在这个图表中，对于橘子来说，着色效果很好，因为正面和反面都有值。但是对于香蕉来说，阴影是不正确的。它只有正值，因此只有正值应该着色，而不是负值，即0到-2.5不应该用灰色着色

感谢您的帮助

带绘图带的Highchart列：

代码如下：

Highcharts.chart('container', {  
  chart: {  
    type: 'column'  
  },  
  title: {  
    text: 'Column chart with negative values'  
  },  
  xAxis: {  
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],  
    plotBands: [{   
      color: 'gray',  
      from: 0.5,  
      to: 1.5  
    },  
    {   
      color: 'gray',  
      from: 3.5,  
      to: 4.5  
    }],  
  },  
  credits: {  
    enabled: false  
  },  
  series: [{  
    name: 'John',  
    data: [5, 3, 4, 7, 2]  
  }, {  
    name: 'Jane',  
    data: [2, -2, -2, 2, 1]  
  }, {  
    name: 'Joe',  
    data: [3, 4, 4, -2, 5]  
  }]  
});  

---

不能对所描述的内容使用PlotBand，因为它们是从-∞ 到∞. 但是，可以使用自定义形状并使其看起来像打印条带

首先，在加载图表时，您需要有一个函数fire：

chart: {
  events: {
    load: function() {
      this.customRect = [] //We use this to keep track off all the shapes we create
      addPlotbands(this); //Function to find what area should be colored in what way
    }
  }
}

然后需要一个函数来检测所有值是正值、负值还是混合值。这可以通过以下方式完成（请注意，这假设所有系列的点数完全相同）：

但是，当您调整窗口大小时，形状将不会调整大小。这可以通过向重画事件添加一些额外代码来解决：

redraw: function() {
  if (this.customRect) {
    for (let i = 0; i < this.customRect.length; i++) {
      this.customRect[i].destroy(); // Remove all the old rectangles before adding any new ones
    }
    this.customRect = [] //Empty the array of shapes
    let chart = this;
    setTimeout(function() { //We use a small timeout here to make sure the user is done resizing
      addPlotbands(chart)
    }, 100);
  }
}

重画：函数（）{
if（this.customRect）{
for（设i=0；i

函数addPlotbands（图表）{
let series=chart.series
让yMin=chart.yAxis[0].getExtremes（）.min；
设yMax=chart.yAxis[0].getExtremes（）.max；
对于（设i=0；i<系列[0]。data.length；i++）{
让allAboveZero=true；
让allBelowZero=true；
对于（设j=0；j=0）{
allBelowZero=错误；
}否则{
allAboveZero=假；
}
}
if（allAboveZero）{
addCustomElement（图表、i、0、yMax）
}否则如果（全部低于零）{
addCustomElement（图表，i，yMin，0）
}否则{
addCustomElement（图表、i、yMin、yMax）
}
}
}
函数addCustomElement（图表、x、yMin、yMax）{
设yAxis=chart.yAxis[0]
设xAxis=chart.xAxis[0]
chart.customRect.push（chart.renderer.rect(
toPixels（x-0.5，false），//最左边的像素
toPixels（yMax，false），//最上面的像素
xAxis.toPixels（x+0.5，false）-xAxis.toPixels（x-0.5，false），//宽度
yAxis.toPixels（yMin，false）-yAxis.toPixels（yMax，false）//高度
)
艾特先生({
“笔划宽度”：2，
填充：“灰色”，
zIndex:-1
})
.add（））；
}
Highcharts.chart（'容器'{
图表：{
键入：“列”，
活动：{
加载：函数（）{
this.customRect=[]
添加打印带（本）；
},
重画：函数（）{
if（this.customRect）{
for（设i=0；i
除了使用PlotBand，您还可以（通过Highcharts SvgRender）创建覆盖PlotBand不需要的部分的白色矩形。您可以在下面找到此解决方案的响应示例：

    events: {
        render: function() {
            var chart = this,
                yAxis = chart.yAxis[0],
                xAxis = chart.xAxis[0],
                minPxY = yAxis.toPixels(yAxis.min),
                zeroPxY = yAxis.toPixels(0),
                series = chart.series,
                i,
                j,
                xValue,
                startCategory,
                endCategory,
                hasNegative;

            if (chart.correctedPlotBand) {
                Highcharts.each(chart.correctedPlotBand, function(el) {

                    el.destroy();
                });
                chart.correctedPlotBand = [];
            } else {
                chart.correctedPlotBand = [];
            }

            for (i = 0; i < series[0].points.length; i++) {
                hasNegative = false;

                for (j = 0; j < series.length; j++) {

                    if (series[j].points[i].y < 0) {
                        hasNegative = true;
                    }
                }
                if (!hasNegative) {
                    xValue = series[0].points[i].x;
                    startCategory = xAxis.toPixels(xValue - 0.5) - 1;
                    endCategory = Math.ceil(xAxis.toPixels(xValue + 0.5));

                    chart.correctedPlotBand.push(chart.renderer.rect(startCategory, zeroPxY, endCategory - startCategory, minPxY - zeroPxY)
                        .attr({
                            fill: '#fff',
                            zIndex: 0
                        })
                        .add())
                }
            }

        }
    }

事件：{
render:function（）{
var图表=此，
yAxis=chart.yAxis[0]，
xAxis=chart.xAxis[0]，
minPxY=yAxis.toPixels（yAxis.min），
zeroPxY=yAxis.toPixels（0），
series=chart.series，
我
J
xValue，
startCategory，
endCategory，
阴性；
if（图表修正绘图带）{
Highcharts.each（chart.correctedPlotBand，函数（el）{
el.destroy（）；
});
chart.correctedPlotBand=[]；
}否则{
chart.correctedPlotBand=[]；
}
对于（i=0；i<系列[0].points.length；i++）{
hasNegative=假；
对于（j=0；j

现场演示：

API参考：
您可以添加highcharts代码吗？您好，添加的代码，您也可以在这里看到：
redraw: function() {
  if (this.customRect) {
    for (let i = 0; i < this.customRect.length; i++) {
      this.customRect[i].destroy(); // Remove all the old rectangles before adding any new ones
    }
    this.customRect = [] //Empty the array of shapes
    let chart = this;
    setTimeout(function() { //We use a small timeout here to make sure the user is done resizing
      addPlotbands(chart)
    }, 100);
  }
}

    events: {
        render: function() {
            var chart = this,
                yAxis = chart.yAxis[0],
                xAxis = chart.xAxis[0],
                minPxY = yAxis.toPixels(yAxis.min),
                zeroPxY = yAxis.toPixels(0),
                series = chart.series,
                i,
                j,
                xValue,
                startCategory,
                endCategory,
                hasNegative;

            if (chart.correctedPlotBand) {
                Highcharts.each(chart.correctedPlotBand, function(el) {

                    el.destroy();
                });
                chart.correctedPlotBand = [];
            } else {
                chart.correctedPlotBand = [];
            }

            for (i = 0; i < series[0].points.length; i++) {
                hasNegative = false;

                for (j = 0; j < series.length; j++) {

                    if (series[j].points[i].y < 0) {
                        hasNegative = true;
                    }
                }
                if (!hasNegative) {
                    xValue = series[0].points[i].x;
                    startCategory = xAxis.toPixels(xValue - 0.5) - 1;
                    endCategory = Math.ceil(xAxis.toPixels(xValue + 0.5));

                    chart.correctedPlotBand.push(chart.renderer.rect(startCategory, zeroPxY, endCategory - startCategory, minPxY - zeroPxY)
                        .attr({
                            fill: '#fff',
                            zIndex: 0
                        })
                        .add())
                }
            }

        }
    }