Chart.jsは2つのデータを1つのバーに結合します

Question

私はcharts.jsを使ってデータを表示しています。私はそれをセットアップし、それは働いています。

しかし、私はすべてのドキュメントを読んでおり、達成したいものを解決する方法を理解できません。

現在、dataには、3つの数字[12, 19, 3]が含まれています。これは得点の実際の数です。しかし、得点の数についての予測もあります。この値は、私が持っているデータに基づいて常に小さくなります。得点される目標は[8, 11, 1]です。これらは最初のセットに対応しています。

同じバーに2つの値を組み合わせる必要はありますか。したがって、最初のバーでは、期待される目標数として8になり、次にバーの上部に実際の目標数が表示されます。

以下は私のコードです。

うまくいけば、私の質問は意味

var ctx = document.getElementById("myChart"); 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Red", "Blue", "Yellow"], 
      datasets: [{ 
       label: '# of Goals', 
       data: [12, 19, 3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 0.2)', 
        'rgba(54, 162, 235, 0.2)', 
        'rgba(255, 206, 86, 0.2)' 
       ], 
       borderColor: [ 
        'rgba(255,99,132,1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)' 
       ], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      responsive: false, 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 

\t \t var ctx = document.getElementById("myChart"); 
 
\t \t var myChart = new Chart(ctx, { 
 
\t \t  type: 'bar', 
 
\t \t  data: { 
 
\t \t   labels: ["Red", "Blue", "Yellow"], 
 
\t \t   datasets: [{ 
 
\t \t    label: '# of Likes', 
 
\t \t    data: [12, 19, 3], 
 
\t \t    backgroundColor: [ 
 
\t \t     'rgba(255, 99, 132, 0.2)', 
 
\t \t     'rgba(54, 162, 235, 0.2)', 
 
\t \t     'rgba(255, 206, 86, 0.2)' 
 
\t \t    ], 
 
\t \t    borderColor: [ 
 
\t \t     'rgba(255,99,132,1)', 
 
\t \t     'rgba(54, 162, 235, 1)', 
 
\t \t     'rgba(255, 206, 86, 1)' 
 
\t \t    ], 
 
\t \t    borderWidth: 1 
 
\t \t   }] 
 
\t \t  }, 
 
\t \t  options: { 
 
\t \t  \t responsive: false, 
 
\t \t   scales: { 
 
\t \t    yAxes: [{ 
 
\t \t     ticks: { 
 
\t \t      beginAtZero:true 
 
\t \t     } 
 
\t \t    }] 
 
\t \t   } 
 
\t \t  } 
 
\t \t });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script> 
 
<canvas id="myChart" width="400" height="400"></canvas>

Answer 1

バージョン2が積層棒グラフをサポートしています。

https://jsfiddle.net/r71no58a/10/

scales: { 
     xAxes: [{ 
      stacked: true, 
     }], 
     yAxes: [{ 
      stacked: true, 
      ticks: { 
       beginAtZero: true 
      } 
     }] 
    }