Chart.Js - グラフバーの背景バー

Question

私はChart.jsを使って自分のグラフの水平バーを作成します。この時点で、私は最初のイメージが何であるかです。 しかし、私はパーセンテージで "BackgroundBar"を作成する必要がありますが、私はどのようにそれを行うことができないのか分かりません。誰か助けてくれますか？

これは私の出力です。

これは私が欲しいチャート..です

私のコードスニペットは、以下のようなものです。..

var bar_ctx = document.getElementById('bar-chart').getContext('2d'); 
 

 
     var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0); 
 
     purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)'); 
 
     purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)'); 
 
     purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)'); 
 
     purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)'); 
 
     purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)'); 
 

 
     var bar_chart = new Chart(bar_ctx, { 
 
      type: 'horizontalBar', 
 
      data: { 
 
       labels: ["Red", "Blue"], 
 
       datasets: [{ 
 
        label: '# of Votes', 
 
        data: [12, 19], 
 
        backgroundColor: purple_orange_gradient, 
 
        hoverBackgroundColor: purple_orange_gradient, 
 
        borderWidth: 0 
 
       }] 
 
      }, 
 
      options: { 
 
       scales: { 
 
        yAxes: [{ 
 
         categorySpacing: 0, 
 
         barThickness: 20 
 
        }], 
 
        xAxes: [{ 
 
         ticks: { 
 
          beginAtZero: true 
 
          //max:100 
 
         } 
 
        }] 
 
       } 
 
      } 
 
     });

<canvas id="bar-chart" width="300" height="125"></canvas>

Answer 1

これは、 - chartjs-plugin-annotationというChartJSプラグインを使用して実現できます。

DEMO

var bar_ctx = document.getElementById('bar-chart').getContext('2d'); 
 

 
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0); 
 
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)'); 
 
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)'); 
 
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)'); 
 
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)'); 
 
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)'); 
 

 
var bar_chart = new Chart(bar_ctx, { 
 
    type: 'horizontalBar', 
 
    data: { 
 
     labels: ["Red", "Blue"], 
 
     datasets: [{ 
 
     label: '# of Votes', 
 
     data: [12, 19], 
 
     backgroundColor: purple_orange_gradient, 
 
     hoverBackgroundColor: purple_orange_gradient, 
 
     borderWidth: 0 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     yAxes: [{ 
 
      categorySpacing: 0, 
 
      barThickness: 20 
 
     }], 
 
     xAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     }, 
 
     annotation: { 
 
     annotations: [{ 
 
      type: 'box', 
 
      drawTime: 'beforeDatasetsDraw', 
 
      id: 'bg-bar-1', 
 
      xScaleID: 'x-axis-0', 
 
      xMin: 0, 
 
      xMax: 10, 
 
      backgroundColor: '#7f7f7f', 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script> 
 
<canvas id="bar-chart" width="300" height="125"></canvas>

このプラグインの詳細については、それのユースケース、hereを参照してください。