JavaScript Error - Uncaught SyntaxError: Unerwartete Zahl

Question

In meinem PHP bin ich zwei verschiedene Select-Anweisungen ausgeführt und übergebe sie an meine JQuery-Arrays value undIch habe überprüft, dass jedes Array Daten im richtigen Format enthält, aber mein Problem ist das Mein Diagramm wird nie erstellt. Was ich möchte, ist, dass Set 1 ein Balken ist und Set 2 eine Linie ist, die dieselben Datenpunkte wie Set 1 zeigt, aber eine Linie ist. Ich habe die folgende Syntax ausprobiert, aber da kein Diagramm angezeigt wird, stimmt etwas nicht.

<script> 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    var chart = new Chart(ctx, {     
     data: { 
      type: 'bar', 
      labels: labelsarr, 
      datasets: [{ 
        label: 'Set 1', 
        data: values, 
        backgroundColor: 'rgba(0, 119, 204, 0.8)', 
       }] 
     }, { 
      type: 'line', 
      datasets: [{ 
        label: 'Set 2', 
        data: values1, 
        backgroundColor: 'rgba(0,119, 208, 0.8)', 
      }] 
     } 
     options: { 
      tooltips: { }, 
      legend: { 
       display: false, 
       position: 'top', 
      }, 
      scales: { } 
     }); 
<script> 

EDIT
Ich habe weiterhin mit der Syntax arbeiten, und ich jetzt einen Fehler von

Uncaught SyntaxError: Unexpected number

ist dies die vollständige Syntax ich jetzt nutzen - was irrende ist? Ich denke, es ist etwas in der JavaScript, da die Seite geladen wird alles außer dem Diagramm

 var ctx = document.getElementById('canvas').getContext('2d'); 
     var chart = new Chart(ctx, { 
     datasets: [{ 
        type: 'bar', 
        labels: labelsarr, 
        label: 'Sample 1', 
        backgroundColor: 'rgba(0, 119, 204, 0.8)', 
        data: [ values ] 
      }, { 
       type: 'line', 
       label: 'Set 2', 
       backgroundColor: 'rgba(0,119, 208, 0.8)', 
       data: [ values 1 ] 
      }, 
      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', 
        text: 'Sample 2', 
       }, 
       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; 
         labels.forEach(function (e, i) { 
          var bar = chart.data.datasets[0]._meta[0].data[i]._model; 
          var dataPoint = e.split(/\s/)[1]; 
          if (dataPoint === '16') 
           bar.backgroundColor = 'orange'; 
          else if (dataPoint === '17') 
           bar.backgroundColor = 'blue'; 
         }); 
        } 
       }] 
      } 
     }]); 

Answer 1

Linie 13 ist: Daten: [Werte 1]

Der Raum zwischen Werte und shouldn‘ t es sein - entweder bekommen von dem Raum befreien zusammen, so haben Sie:

Daten: [Werten1]

Oder

Daten: [Werte, 1]

Nun, ich bin nicht sicher, wo Sie Werte sind definiert, das ist so alles, was ich vorschlagen kann.

Außerdem gab es einige andere Syntaxfehler (z. B. fehlende Klammern). Hier ist der fertige Code (unter der Annahme, dass Sie ein Chart-Objekt haben):

var chart = new Chart(ctx, { 
 
\t \t \t datasets: [{ 
 
\t \t \t \t \t type: 'bar', 
 
\t \t \t \t \t labels: labelsarr, 
 
\t \t \t \t \t label: 'Sample 1', 
 
\t \t \t \t \t backgroundColor: 'rgba(0, 119, 204, 0.8)', 
 
\t \t \t \t \t data: [values] 
 
\t \t \t \t }, { 
 
\t \t \t \t \t type: 'line', 
 
\t \t \t \t \t label: 'Set 2', 
 
\t \t \t \t \t backgroundColor: 'rgba(0,119, 208, 0.8)', 
 
\t \t \t \t \t data: [values1] 
 
\t \t \t \t }, { 
 
\t \t \t \t options: { 
 
\t \t \t \t \t tooltips: { 
 
\t \t \t \t \t \t callbacks: { 
 
\t \t \t \t \t \t \t label: function (t, d) { 
 
\t \t \t \t \t \t \t \t var xLabel = d.datasets[t.datasetIndex].label; 
 
\t \t \t \t \t \t \t \t var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
 
\t \t \t \t \t \t \t \t return xLabel + ': ' + yLabel; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t legend: { 
 
\t \t \t \t \t \t display: false, 
 
\t \t \t \t \t \t position: 'top', 
 
\t \t \t \t \t \t text: 'Sample 2', 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t scales: { 
 
\t \t \t \t \t \t yAxes: [{ 
 
\t \t \t \t \t \t \t \t ticks: { 
 
\t \t \t \t \t \t \t \t \t beginAtZero: true, 
 
\t \t \t \t \t \t \t \t \t callback: function (value, index, values) { 
 
\t \t \t \t \t \t \t \t \t \t if (parseInt(value) >= 1000) { 
 
\t \t \t \t \t \t \t \t \t \t \t return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
\t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t return '$' + value; 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }] 
 
\t \t \t \t \t } 
 
\t \t \t \t }, 
 
\t \t \t \t plugins: [{ 
 
\t \t \t \t \t \t beforeDraw: function (chart) { 
 
\t \t \t \t \t \t \t var labels = chart.data.labels; 
 
\t \t \t \t \t \t \t labels.forEach(function (e, i) { 
 
\t \t \t \t \t \t \t \t var bar = chart.data.datasets[0]._meta[0].data[i]._model; 
 
\t \t \t \t \t \t \t \t var dataPoint = e.split(/\s/)[1]; 
 
\t \t \t \t \t \t \t \t if (dataPoint === '16') 
 
\t \t \t \t \t \t \t \t \t bar.backgroundColor = 'orange'; 
 
\t \t \t \t \t \t \t \t else if (dataPoint === '17') 
 
\t \t \t \t \t \t \t \t \t bar.backgroundColor = 'blue'; 
 
\t \t \t \t \t \t \t }); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }] 
 
\t \t \t \t } 
 
\t \t \t }] \t 
 
\t \t);