バックグラウンドを持つ単一のバーChart.js

Question

Chart.jsで水平バーをペイントしたいが、デフォルトの背景色（最大値）が必要で、現在の値を別の色でペイントしたい。ちょうど下のイメージのように。これどうやってするの？

Answer 1

Chart.jsでこれを行う簡単な方法はありません（特定の「100％スタックバー」タイプなど）。あなたが必要とするものは、2つの積み重なった横棒です。

• まず、代わりに2の1つのバーを持っているためにhorizontalBar

  // 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. 
      // ... 
  }; 
  

• としてあなたchart-typeを定義し、それらをスタックする必要があります。あなたはまた、鱗を隠す必要があります。必要に応じて、凡例とツールヒントを非表示にすることができます。これは、全てoptionsに構成されている：積層バーは互いの上に配置されているよう

  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に相当します。ここで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です。