これは私の構文である私は1セット問題なく表示するために私のチャートを得ることができます

Question

2つのデータセットCharts.jsでチャートを生成しますが、以下の構文に二つ目に追加することは私に

Uncaught Syntax Error: Unexpected Token }

の誤差を与えます - 問題の原因は何ですか？

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

コード}]の最後の2行目が後方にあります。それは]}

再構成構造する必要があります。

var ctx = document.getElementById('canvas').getContext('2d'); 
var chart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    datasets: [ 
     { 
     label: 'Red Team', 
     data: values, 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
     }, 
     { 
     label: 'Green Team', 
     data: values1, 
     type: 'line', 
     backgroundColor: 'rgba(0,129, 218, 0.8)', 
     } 
    ], 
    labels: labelsarr 
    }, 
    options: { 
    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; 
    } 
    }] 
});