Chart.jsグラフが生成されない

Question

私の配列の長さが両方とも24であることを確認しましたが、何らかの理由で以下の構文がチャートを生成しません。これは棒グラフのあるデータセットに対してのみ機能しますが、2つのデータセットを持つコンボ棒グラフに変更しようとしています。それは、データの問題ではないので、表示から私のチャートを妨げている何

...

alert(values.length); 
alert(values1.length); 
var ctx = document.getElementById('canvas').getContext('2d'); 
var chart = new Chart(ctx, { 
     datasets: [{ 
       type: 'bar', 
       labels: labelsarr, 
       label: 'Red Team', 
       backgroundColor: 'rgba(0, 129, 214, 0.8)', 
       data: [values] 
      }, { 
       type: 'line', 
       label: 'Green Team', 
       backgroundColor: 'rgba(0,129, 218, 0.8)', 
       data: [values1] 
      }, { 
      options: { 
       tooltips: { 
        callbacks: { 
         label: function (t, d) { 
          var xLabel = d.datasets[t.datasetIndex].label; 
          var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
          return xLabel + ': ' + yLabel; 
         } 
        } 
       }, 
       legend: { 
        display: false, 
        position: 'top', 
       }, 
       scales: { 
        yAxes: [{ 
          ticks: { 
           beginAtZero: true, 
           callback: function (value, index, values) { 
            if (parseInt(value) >= 1000) { 
             return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
            } else { return '$' + value; } 
           } 
          } 
         }] 
       } 
      }, 
      plugins: [{ 
        beforeDraw: function (chart) { 
         var labels = chart.data.labels; 
        } 
       }] 
      } 
     ]} 
    ); 

Answer 1

問題のカップル：

• チャートタイプを正しく定義していません。最初のデータセットのタイプは、データセット自体の外にある必要があります。
• がdataオブジェクト（同じlabelsアレイについても）に属している間は、独立datasetsアレイを割り当てます。
• valuesとvalues1が既に配列され、以来、それらは、配列表記で包まれるべきではありません。ここで

コードの改訂版である：

var labelsarr = ['Jan', 'Feb', 'Mar']; 
 
var values = [1, 2, 3]; 
 
var values1 = [1, 2, 3]; 
 

 
// above variables are explicitly defined, since no ajax is being used 
 

 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var chart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     label: 'Red Team', 
 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
 
     data: values 
 
     }, { 
 
     type: 'line', 
 
     label: 'Green Team', 
 
     backgroundColor: 'rgba(0,129, 218, 0.3)', 
 
     data: values1 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       var xLabel = d.datasets[t.datasetIndex].label; 
 
       var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
 
       return xLabel + ': ' + yLabel; 
 
      } 
 
     } 
 
     }, 
 
     legend: { 
 
     display: false, 
 
     position: 'top', 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       callback: function(value, index, values) { 
 
        if (parseInt(value) >= 1000) { 
 
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
        } else { 
 
        return '$' + value; 
 
        } 
 
       } 
 
      } 
 
     }] 
 
     } 
 
    }, 
 
    plugins: [{ 
 
     beforeDraw: function(chart) { 
 
     var labels = chart.data.labels; 
 
     } 
 
    }] 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>

Answer 2

チャートは、いずれかのラインであるか、または両方の指定したバーができ、ここでドックにhttp://www.chartjs.org/docs/latest/

1を参照のうえ

それはちょうどあなたのコードをrearrageこのような何かを見て、正常に動作する必要があります試してみてください

var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
});