如何在chart.js中制作矩形 [英] How to make rectangle in chart.js

问题描述

我正在尝试在chart.js中放置矩形以使其在上下范围/水平，就像在图像中一样

尽管在这个示例中我可以画两条线来实现它

 var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
    afterDraw: function(chart) {
        if (typeof chart.config.options.lineAt != 'undefined') {
        	var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            
            ctxPlugin.strokeStyle = "green";
        	ctxPlugin.beginPath();
            lineAt = 102;
            ctxPlugin.moveTo(xAxe.left, lineAt);
            ctxPlugin.lineTo(xAxe.right, lineAt);
            ctxPlugin.moveTo(xAxe.left, lineAt-33);
            ctxPlugin.lineTo(xAxe.right, lineAt-33);
            ctxPlugin.stroke();
        }
    }
});
var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
              datasets: [{
                  label: 'Findings',
                  data: [0,45],
                  backgroundColor: 'rgba(54, 162, 235, 0.2)',
                  borderColor: 'rgba(54, 162, 235, 1)',
                  borderWidth: 1
              }]
          },
          options: {
          	lineAt: 15,
            scales: {
                yAxes: [{
                  display: true,
                  ticks: {
                      beginAtZero: true,
                      steps: 20,
                      stepValue: 20,
                      max: 60,
                      min: 0
                  }
              }]
            }
          }
      }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas> 

请在此处分享您的建议: http://jsfiddle.net/nikleshraut/ad2fsefe/

解决方案

已经存在一个名为 chartjs-plugin-annotation ，通过它可以轻松实现这一目标.

使用该插件，您需要创建一个框注释(矩形)，例如:

options: { //your chart options
   annotation: {
      annotations: [{
         type: 'box',
         drawTime: 'beforeDatasetsDraw',
         yScaleID: 'y-axis-0',
         yMin: 40,
         yMax: 50,
         backgroundColor: 'rgba(0, 255, 0, 0.1)'
      }]
   }
}

^{注意:这是绘制矩形所需的最少选项， 并且您可以在此处.}

这是一个 工作小提琴 .

I am trying to put rectangle to make a upper-lower range/level in chart.js, like in image

Although I am able to make it by drawing two line in this example

var ctx = document.querySelector("#myChart").getContext('2d');
Chart.pluginService.register({
    afterDraw: function(chart) {
        if (typeof chart.config.options.lineAt != 'undefined') {
        	var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            
            ctxPlugin.strokeStyle = "green";
        	ctxPlugin.beginPath();
            lineAt = 102;
            ctxPlugin.moveTo(xAxe.left, lineAt);
            ctxPlugin.lineTo(xAxe.right, lineAt);
            ctxPlugin.moveTo(xAxe.left, lineAt-33);
            ctxPlugin.lineTo(xAxe.right, lineAt-33);
            ctxPlugin.stroke();
        }
    }
});
var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Dec"],
              datasets: [{
                  label: 'Findings',
                  data: [0,45],
                  backgroundColor: 'rgba(54, 162, 235, 0.2)',
                  borderColor: 'rgba(54, 162, 235, 1)',
                  borderWidth: 1
              }]
          },
          options: {
          	lineAt: 15,
            scales: {
                yAxes: [{
                  display: true,
                  ticks: {
                      beginAtZero: true,
                      steps: 20,
                      stepValue: 20,
                      max: 60,
                      min: 0
                  }
              }]
            }
          }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Please share your suggestion here : http://jsfiddle.net/nikleshraut/ad2fsefe/

解决方案

There is already a Chart.js plugin exists called chartjs-plugin-annotation, by which you can achieve that much easily.

Using that plugin, you'll need to create a box annotation (rectangle), as such :

options: { //your chart options
   annotation: {
      annotations: [{
         type: 'box',
         drawTime: 'beforeDatasetsDraw',
         yScaleID: 'y-axis-0',
         yMin: 40,
         yMax: 50,
         backgroundColor: 'rgba(0, 255, 0, 0.1)'
      }]
   }
}

^{note: this is the minimum options required to draw that rectangle, and you can find more options here.}

Here is a working fiddle.

这篇关于如何在chart.js中制作矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！