만들려면 chart.js에서 사각형

나는 그것을 만들 수 있어요 비록 이미지만들려면 chart.js에서 사각형

에서처럼, chart.js의 상단 하단 범위/수준을 만들기 위해 사각형을 넣어 위해 노력하고 있어요 이 예에서 두 개의 라인을 그려

var ctx = document.querySelector("#myChart").getContext('2d'); 
 
Chart.pluginService.register({ 
 
    afterDraw: function(chart) { 
 
     if (typeof chart.config.options.lineAt != 'undefined') { 
 
     \t 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"; 
 
     \t 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: { 
 
      \t 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>

여기에 귀하의 의견을 공유하십시오 : 012,390을

출처

2017-11-04 C2486

이미 쉽게 얻을 수있는 chartjs-plugin-annotation이라는 Chart.js 플러그인이 있습니다.

이 플러그인을 사용하면 같은 상자 주석 (사각형)을 만들어야합니다 :

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)' 
     }] 
    } 
}

^{참고 :이, 그 사각형을 그리는 데 필요한 최소 옵션입니다 더 많은 옵션 here을 찾을 수 있습니다.}

여기는 working fiddle입니다.

출처

2017-11-04 07:24:37

와우! 그게 위대한 플러그인이야 – C2486

나는 선 너비로 도달했다 : http://jsfiddle.net/nikleshraut/ad2fsefe/1/ 플러그인없이 – C2486

그래, 당신은 그 플러그인을 대신 자신의 플러그인을 쓰는 시간을 낭비하지 말아야한다. tho, 'moveTo/lineTo' 대신'fillRect'를 사용할 수 있습니다. –

만들려면 chart.js에서 사각형

답변

관련 문제