배경이있는 단일 막대 Chart.js

Question

Chart.js가있는 가로 막대를 페인트하고 싶지만 기본 배경색 (최대 값)을 원하고 현재 값을 다른 색상으로 페인트합니다. 아래 이미지와 같습니다. 내가 어떻게 할 수 있니?

Answer 1

Chart.js에서 특정 "100 % 스택 막대"유형과 같은 쉬운 방법은 없습니다. 필요한 것은 두 개의 수평 막대가 쌓여 있습니다. 그들이 쌓아하셔야합니다 chart-type 대신 두 단일 줄을하기 위해

// html 
<canvas id="chart" height="20"></canvas> 

// javascript 
var ctx = document.getElementById('chart'); 
var bar_chart = new Chart(ctx, { 
    type: 'horizontalBar' // this will give you a horizontal bar. 
    // ... 
}; 

horizontalBar A와

• 첫째, 정의합니다. 또한 비늘을 숨길 필요가 있습니다. 필요에 따라 범례 및 툴팁을 숨길 수 있습니다.

  적층 바가 서로의 상부에 배치되기 때문에

  var bar_chart = new Chart(ctx, { 
      // ... 
      options: { 
      legend: { 
       display: false // hides the legend 
      }, 
      tooltips: { 
       enabled: false // hides the tooltip. 
      } 
      scales: { 
       xAxes: [{ 
       display: false, // hides the horizontal scale 
       stacked: true // stacks the bars on the x axis 
       }], 
       yAxes: [{ 
       display: false, // hides the vertical scale 
       stacked: true // stacks the bars on the y axis 
       }] 
      } 
      } 
  }; 
  

• 가 최초 세트가 값 (57.866)을 포함하고, 두 번째 세트는 max - value에 대응한다 : 이것은 모든 options 구성된다. 여기 value = 57866 및 max = 80000을 고려 예는 다음과 같습니다

  var value = 57866; // your value 
  var max = 80000; // the max 
  
  var bar_chart = new Chart(ctx, { 
      // ... 
      datasets: [{ 
      data: [value], 
      backgroundColor: "rgba(51,230,125,1)" 
      }, { 
      data: [max - value], 
      backgroundColor: "lightgrey" 
      }] 
  }; 
  

이 여기에 전체 코드로 jsfiddle입니다.