<tfoot id='JjK74'></tfoot>

    <small id='JjK74'></small><noframes id='JjK74'>

    <legend id='JjK74'><style id='JjK74'><dir id='JjK74'><q id='JjK74'></q></dir></style></legend>

        <bdo id='JjK74'></bdo><ul id='JjK74'></ul>

        <i id='JjK74'><tr id='JjK74'><dt id='JjK74'><q id='JjK74'><span id='JjK74'><b id='JjK74'><form id='JjK74'><ins id='JjK74'></ins><ul id='JjK74'></ul><sub id='JjK74'></sub></form><legend id='JjK74'></legend><bdo id='JjK74'><pre id='JjK74'><center id='JjK74'></center></pre></bdo></b><th id='JjK74'></th></span></q></dt></tr></i><div id='JjK74'><tfoot id='JjK74'></tfoot><dl id='JjK74'><fieldset id='JjK74'></fieldset></dl></div>

        图表 js y 轴的不同背景

        时间:2023-11-02

      1. <legend id='YX3O6'><style id='YX3O6'><dir id='YX3O6'><q id='YX3O6'></q></dir></style></legend>

        1. <small id='YX3O6'></small><noframes id='YX3O6'>

          <tfoot id='YX3O6'></tfoot>

              <tbody id='YX3O6'></tbody>
            • <bdo id='YX3O6'></bdo><ul id='YX3O6'></ul>
                  <i id='YX3O6'><tr id='YX3O6'><dt id='YX3O6'><q id='YX3O6'><span id='YX3O6'><b id='YX3O6'><form id='YX3O6'><ins id='YX3O6'></ins><ul id='YX3O6'></ul><sub id='YX3O6'></sub></form><legend id='YX3O6'></legend><bdo id='YX3O6'><pre id='YX3O6'><center id='YX3O6'></center></pre></bdo></b><th id='YX3O6'></th></span></q></dt></tr></i><div id='YX3O6'><tfoot id='YX3O6'></tfoot><dl id='YX3O6'><fieldset id='YX3O6'></fieldset></dl></div>

                  本文介绍了图表 js y 轴的不同背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  I have a line chart in chart js. I want to give it a different background on the y axis say, 0-40 is red,40-70 is yellow and 70-100 is green. The limit for the y axis will always be 100.

                     var scatterChart = new Chart(ctx, {
                      type: 'line',
                      data: {
                          datasets: [{
                              label: ' Dataset',
                              data: [{
                                  x: 1,
                                  y: 10
                              }, {
                                  x: 2,
                                  y: 50
                              }, {
                                  x: 3,
                                  y: 88
                              }, {
                                  x: 4,
                                  y: 5
                              }]
                          }]
                      },
                      options: {
                          scales: {
                              xAxes: [{
                                  type: 'linear',
                                  position: 'bottom'
                              }]
                          }
                      }
                  });
                  

                  How do i set the background?

                  解决方案

                  There is not a built in option, but we can achieve the result with some code.

                  var ctx = document.getElementById("chart").getContext("2d");
                  
                  var scatterChart = new Chart(ctx, {
                    type: "line",
                    data: {
                      datasets: [{
                        label: " Dataset",
                        data: [{
                            x: 1,
                            y: 10
                          },
                          {
                            x: 2,
                            y: 50
                          },
                          {
                            x: 3,
                            y: 88
                          },
                          {
                            x: 4,
                            y: 5
                          }
                        ]
                      }]
                    },
                    options: {
                      backgroundRules: [{
                          backgroundColor: "red",
                          yAxisSegement: 40
                        },
                        {
                          backgroundColor: "yellow",
                          yAxisSegement: 70
                        },
                        {
                          backgroundColor: "green",
                          yAxisSegement: Infinity
                        }
                      ],
                      scales: {
                        xAxes: [{
                          type: "linear",
                          position: "bottom"
                        }],
                        yAxes: [{
                          color: ["#123456", "#234567"]
                        }]
                      }
                    },
                    plugins: [{
                      beforeDraw: function(chart) {
                        var ctx = chart.chart.ctx;
                        var ruleIndex = 0;
                        var rules = chart.chart.options.backgroundRules;
                        var yaxis = chart.chart.scales["y-axis-0"];
                        var xaxis = chart.chart.scales["x-axis-0"];
                        var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1);
                        for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) {
                          if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) {
                            ctx.fillStyle = rules[ruleIndex].backgroundColor;
                            ctx.fillRect(xaxis.left, yaxis.top + (i - 1) * (yaxis.height * partPercentage), xaxis.width, yaxis.height * partPercentage);
                          } else {
                            ruleIndex++;
                            i++;
                          }
                        }
                      }
                    }]
                  });

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
                  <div class="container">
                    <canvas id="chart"></canvas>
                  </div>

                  这篇关于图表 js y 轴的不同背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:ChartJS 显示时间数据的差距 下一篇:(Vue, ChartJS) 从子组件画布上下文为图表创建渐变背景

                  相关文章

                • <i id='pMw4E'><tr id='pMw4E'><dt id='pMw4E'><q id='pMw4E'><span id='pMw4E'><b id='pMw4E'><form id='pMw4E'><ins id='pMw4E'></ins><ul id='pMw4E'></ul><sub id='pMw4E'></sub></form><legend id='pMw4E'></legend><bdo id='pMw4E'><pre id='pMw4E'><center id='pMw4E'></center></pre></bdo></b><th id='pMw4E'></th></span></q></dt></tr></i><div id='pMw4E'><tfoot id='pMw4E'></tfoot><dl id='pMw4E'><fieldset id='pMw4E'></fieldset></dl></div>

                • <tfoot id='pMw4E'></tfoot>
                • <small id='pMw4E'></small><noframes id='pMw4E'>

                      <legend id='pMw4E'><style id='pMw4E'><dir id='pMw4E'><q id='pMw4E'></q></dir></style></legend>
                        <bdo id='pMw4E'></bdo><ul id='pMw4E'></ul>