blocks|key|2603326|text|您不能将绘图带用于您所描述的内容，因为它们将从-∞转换为∞。但是，您可以使用自定义形状并使它们看起来像打印标注栏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2603327|首先，您需要在加载图表时触发一个函数：|2603328|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
++++}
++}
}|code-block|syntax|javascript|2603329|然后，您需要一个函数来检测何时所有值都是正值、负值或混合值。这可以通过以下方式完成(请注意，这假设所有系列都具有完全相同的点数)：|2603330|function+addPlotbands(chart)+{
++let+series+=+chart.series
++let+yMin+=+chart.yAxis[0].getExtremes().min;
++let+yMax+=+chart.yAxis[0].getExtremes().max;

++for+(let+i+=+0;+i+<+series[0].data.length;+i%2B%2B)+{
++++let+allAboveZero+=+true;
++++let+allBelowZero+=+true;
++++for+(let+j+=+0;+j+<+chart.series.length;+j%2B%2B)+{
++++++if+(series[j].data[i].y+>=+0)+{
++++++++allBelowZero+=+false;
++++++}+else+{
++++++++allAboveZero+=+false;
++++++}
++++}
++++if+(allAboveZero)+{
++++++addCustomElement(chart,+i,+0,+yMax)
++++}+else+if+(allBelowZero)+{
++++++addCustomElement(chart,+i,+yMin,+0)
++++}+else+{
++++++addCustomElement(chart,+i,+yMin,+yMax)
++++}
++}
}|2603331|最后，您需要一个函数来创建自定义矩形形状，它可以像这样完成：|2603332|function+addCustomElement(chart,+x,+yMin,+yMax)+{+//yMin+and+yMax+refers+to+the+window,+not+the+data
++let+yAxis+=+chart.yAxis[0]
++let+xAxis+=+chart.xAxis[0]
++chart.customRect.push(chart.renderer.rect(
++++xAxis.toPixels(x+-+0.5,+false),++++++++++++++++++++++++++++++++++//Leftmost+pixel
++++yAxis.toPixels(yMax,+false),+++++++++++++++++++++++++++++++++++++//Top+pixel
++++xAxis.toPixels(x+%2B+0.5,+false)+-+xAxis.toPixels(x+-+0.5,+false),+//Width
++++yAxis.toPixels(yMin,+false)+-+yAxis.toPixels(yMax,+false)++++++++//Height
++)
++.attr({
++++'stroke-width':+2,
++++fill:+'gray',
++++zIndex:+-1
++})
++.add());
}|2603333|这很有效，但是当您调整窗口大小时，形状不会调整大小。这可以通过向重绘事件添加一些额外的代码来解决：|2603334|redraw:+function()+{
++if+(this.customRect)+{
++++for+(let+i+=+0;+i+<+this.customRect.length;+i%2B%2B)+{
++++++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);
++}
}|2603335|​|2603336|function+addPlotbands(chart)+{
++let+series+=+chart.series
++let+yMin+=+chart.yAxis[0].getExtremes().min;
++let+yMax+=+chart.yAxis[0].getExtremes().max;

++for+(let+i+=+0;+i+<+series[0].data.length;+i%2B%2B)+{
++++let+allAboveZero+=+true;
++++let+allBelowZero+=+true;
++++for+(let+j+=+0;+j+<+chart.series.length;+j%2B%2B)+{
++++++if+(series[j].data[i].y+>=+0)+{
++++++++allBelowZero+=+false;
++++++}+else+{
++++++++allAboveZero+=+false;
++++++}
++++}
++++if+(allAboveZero)+{
++++++addCustomElement(chart,+i,+0,+yMax)
++++}+else+if+(allBelowZero)+{
++++++addCustomElement(chart,+i,+yMin,+0)
++++}+else+{
++++++addCustomElement(chart,+i,+yMin,+yMax)
++++}
++}
}

function+addCustomElement(chart,+x,+yMin,+yMax)+{
++let+yAxis+=+chart.yAxis[0]
++let+xAxis+=+chart.xAxis[0]
++chart.customRect.push(chart.renderer.rect(
++++++xAxis.toPixels(x+-+0.5,+false),+//Leftmost+pixel
++++++yAxis.toPixels(yMax,+false),+//Topmost+pixel
++++++xAxis.toPixels(x+%2B+0.5,+false)+-+xAxis.toPixels(x+-+0.5,+false),+//Width
++++++yAxis.toPixels(yMin,+false)+-+yAxis.toPixels(yMax,+false)+//Height
++++)
++++.attr({
++++++'stroke-width':+2,
++++++fill:+'gray',
++++++zIndex:+-1
++++})
++++.add());
}

Highcharts.chart('container',+{
++chart:+{
++++type:+'column',
++++events:+{
++++++load:+function()+{
++++++++this.customRect+=+[]
++++++++addPlotbands(this);
++++++},
++++++redraw:+function()+{
++++++++if+(this.customRect)+{
++++++++++for+(let+i+=+0;+i+<+this.customRect.length;+i%2B%2B)+{
++++++++++++this.customRect[i].destroy();
++++++++++}
++++++++++this.customRect+=+[]
++++++++++let+chart+=+this;
++++++++++setTimeout(function()+{
++++++++++++addPlotbands(chart)
++++++++++},+100);
++++++++}
++++++}
++++}
++},
++title:+{
++++text:+'Column+chart+with+negative+values'
++},
++xAxis:+{
++++categories:+['Apples',+'Oranges',+'Pears',+'Grapes',+'Bananas'],

++},
++credits:+{
++++enabled:+false
++},
++series:+[{
++++name:+'John',
++++data:+[5,+3,+4,+7,+2,+-3],
++},+{
++++name:+'Jane',
++++data:+[2,+-2,+-2,+2,+1,+-1]
++},+{
++++name:+'Joe',
++++data:+[3,+4,+4,+-2,+5,+-2]
++}]
});|2603337|<script+src="https://code.highcharts.com/highcharts.js"></script>
<script+src="https://code.highcharts.com/highcharts-more.js"></script>
<script+src="https://code.highcharts.com/modules/exporting.js"></script>
<script+src="https://code.highcharts.com/modules/export-data.js"></script>

<div+id="container"+style="min-width:+310px;+height:+400px;+margin:+0+auto"></div>|2603338|2603339|Working+JSFiddle示例：+https://jsfiddle.net/ewolden/gbrjd2uk/|offset|length|style|BOLD|2603340|API+REFs:+、+、+|2603341|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/ewolden/gbrjd2uk/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|J|K|12|0|0|0|9|A|1|C|1|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1K|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1R|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|10|3|V|5|6|7|1T|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1U|8|@$13|1V|14|1W|15|16]]|9|@$13|1X|14|1Y|1|1Z]]|A|$]]|$1|17|3|18|5|6|7|20|8|@$13|21|14|22|15|16]|$13|23|14|24|15|16]|$13|25|14|26|15|16]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]]]

<p>You can't use plotbands for what you have described, since they go from -∞ to ∞. However, you can use custom shapes and have them look like plotbands.</p>

<p>First off you will need to have a function fire when the chart is loaded:</p>

<pre><code>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
    }
  }
}
</code></pre>

<p>Then you need a function to detect when all values are positive,negative, or a mix. This can be done in the following way(note that this assumes all series have <em>exactly</em> the same number of points):</p>

<pre><code>function addPlotbands(chart) {
  let series = chart.series
  let yMin = chart.yAxis[0].getExtremes().min;
  let yMax = chart.yAxis[0].getExtremes().max;

  for (let i = 0; i &lt; series[0].data.length; i++) {
    let allAboveZero = true;
    let allBelowZero = true;
    for (let j = 0; j &lt; chart.series.length; j++) {
      if (series[j].data[i].y &gt;= 0) {
        allBelowZero = false;
      } else {
        allAboveZero = false;
      }
    }
    if (allAboveZero) {
      addCustomElement(chart, i, 0, yMax)
    } else if (allBelowZero) {
      addCustomElement(chart, i, yMin, 0)
    } else {
      addCustomElement(chart, i, yMin, yMax)
    }
  }
}
</code></pre>

<p>Then finally, you need a function to create a custom rectangle shape, which can be done like this:</p>

<pre><code>function addCustomElement(chart, x, yMin, yMax) { //yMin and yMax refers to the window, not the data
  let yAxis = chart.yAxis[0]
  let xAxis = chart.xAxis[0]
  chart.customRect.push(chart.renderer.rect(
    xAxis.toPixels(x - 0.5, false),                                  //Leftmost pixel
    yAxis.toPixels(yMax, false),                                     //Top pixel
    xAxis.toPixels(x + 0.5, false) - xAxis.toPixels(x - 0.5, false), //Width
    yAxis.toPixels(yMin, false) - yAxis.toPixels(yMax, false)        //Height
  )
  .attr({
    'stroke-width': 2,
    fill: 'gray',
    zIndex: -1
  })
  .add());
}
</code></pre>

<p>This works well, however, when you resize the window, the shapes will not be resized. That can be solved by adding some extra code to the redraw event:</p>

<pre><code>redraw: function() {
  if (this.customRect) {
    for (let i = 0; i &lt; 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);
  }
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function addPlotbands(chart) {
  let series = chart.series
  let yMin = chart.yAxis[0].getExtremes().min;
  let yMax = chart.yAxis[0].getExtremes().max;

  for (let i = 0; i &lt; series[0].data.length; i++) {
    let allAboveZero = true;
    let allBelowZero = true;
    for (let j = 0; j &lt; chart.series.length; j++) {
      if (series[j].data[i].y &gt;= 0) {
        allBelowZero = false;
      } else {
        allAboveZero = false;
      }
    }
    if (allAboveZero) {
      addCustomElement(chart, i, 0, yMax)
    } else if (allBelowZero) {
      addCustomElement(chart, i, yMin, 0)
    } else {
      addCustomElement(chart, i, yMin, yMax)
    }
  }
}

function addCustomElement(chart, x, yMin, yMax) {
  let yAxis = chart.yAxis[0]
  let xAxis = chart.xAxis[0]
  chart.customRect.push(chart.renderer.rect(
      xAxis.toPixels(x - 0.5, false), //Leftmost pixel
      yAxis.toPixels(yMax, false), //Topmost pixel
      xAxis.toPixels(x + 0.5, false) - xAxis.toPixels(x - 0.5, false), //Width
      yAxis.toPixels(yMin, false) - yAxis.toPixels(yMax, false) //Height
    )
    .attr({
      'stroke-width': 2,
      fill: 'gray',
      zIndex: -1
    })
    .add());
}

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        this.customRect = []
        addPlotbands(this);
      },
      redraw: function() {
        if (this.customRect) {
          for (let i = 0; i &lt; this.customRect.length; i++) {
            this.customRect[i].destroy();
          }
          this.customRect = []
          let chart = this;
          setTimeout(function() {
            addPlotbands(chart)
          }, 100);
        }
      }
    }
  },
  title: {
    text: 'Column chart with negative values'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],

  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2, -3],
  }, {
    name: 'Jane',
    data: [2, -2, -2, 2, 1, -1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, -2, 5, -2]
  }]
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
&lt;script src="https://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
&lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
&lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;

&lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Working JSFiddle example:</strong> <a href="https://jsfiddle.net/ewolden/gbrjd2uk/" rel="nofollow noreferrer">https://jsfiddle.net/ewolden/gbrjd2uk/</a></p>

<p><strong>API REFs: <a href="https://api.highcharts.com/highcharts/chart.events.load" rel="nofollow noreferrer">Load event</a>, <a href="https://api.highcharts.com/highcharts/chart.events.redraw" rel="nofollow noreferrer">Redraw event</a>, <a href="https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect" rel="nofollow noreferrer">Adding a rectangle</a></strong></p>


blocks|key|2392659|text|除了使用plotBands之外，您还可以(由Highcharts创建)覆盖plotBands不需要的部分的白色矩形。您可以在下面找到此解决方案的响应示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2392660|++++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%2B%2B)+{
++++++++++++++++hasNegative+=+false;

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

++++++++++++++++++++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+%2B+0.5));

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

++++++++}
++++}|code-block|syntax|javascript|2392661|现场演示：https://jsfiddle.net/BlackLabel/sm1kev4t/|offset|length|2392662|接口参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect|2392663|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/BlackLabel/sm1kev4t/|1|https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect^0|0|0|5|15|0|0|5|1Y|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>In addition to use plotBands, you can create (by Highcharts SVGRenderer) white rectangles that cover the unwanted part of plotBands. Below you can find an responsive example of this solution:</p>

<pre><code>    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 &lt; series[0].points.length; i++) {
                hasNegative = false;

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

                    if (series[j].points[i].y &lt; 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())
                }
            }

        }
    }
</code></pre>

<p>Live demo: <a href="https://jsfiddle.net/BlackLabel/sm1kev4t/" rel="nofollow noreferrer">https://jsfiddle.net/BlackLabel/sm1kev4t/</a></p>

<p>API Reference: <a href="https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect" rel="nofollow noreferrer">https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect</a></p>


<p>I am new to highcharts. I am recently stuck with plotting the highcharts.  I am using plotbands to plot the back color. If a value is present, it has to be shaded, if a value is not present, it should not be shaded.  </p>

<p>For example, in this chart, for oranges, the shading is good because there are values for both positive and negative side. But for bananas, the shading is not correct.  It has only positive value, so only the positive side should be shaded, and not the negative side i.e., 0 to -2.5 should not be shaded with gray.  </p>

<p>Any help is appreciated.</p>

<p><strong>Highchart column with plotbands:</strong></p>

<p><a href="https://i.stack.imgur.com/SL44q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SL44q.png" alt="Highchart column with plotbands"></a></p>

<p>Code below:</p>

<pre><code>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]  
  }]  
});  
</code></pre>


How to enable plotting only if values are present in Highcharts?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我是highcharts的新手。我最近一直在绘制highcharts。我正在使用绘图带来绘制背景色。如果值存在，则必须对其进行着色；如果值不存在，则不应对其进行着色。例如，在此图表中，对于橙色，阴影效果很好，因为正侧和负侧都有值。但是对于香蕉，阴影是不正确的。它只有正值，所以只有正边应该着色，而不是负边，即0到-2.5...

问如何仅当Highcharts中存在值时才启用绘图？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅当Highcharts中存在值时才启用绘图？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅当Highcharts中存在值时才启用绘图？
EN