Chart Js + Arrays

Question

Ich versuche, eine Lösung, die chart.js verwendet, zu arbeiten, aber es akzeptiert nicht meine Werte für die Beschriftungen und Dataset.label Parameter.

Für die Etiketten-Parameter Ich bin die Werte in einem Array zu kontrollieren und dann auf die Parameter des Array übergeben, einen Blick auf den Code nehmen, damit Sie sehen, was ich tue:

chartX.map(function (item) { 
 
    return '"' + item + '"'; 
 
}).join(", "); 
 

 
yAxis = chartY.join(', '); 
 

 
console.log(chartX); // <--- ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"] 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: chartX, 
 
    datasets: [{ 
 
     label: 'Försäjlning', 
 
     data: yAxis 
 
    }] 
 
}

chartX ist ein Array und wird innerhalb einer Map formatiert. Das Ergebnis sehen Sie in der Datei console.log (chartX). Für das chartY-Array füge ich es einfach mit ',' hinzu und speichere es in der yAxis-Variablen. Dieser gibt mir auch die erwarteten Werte, wenn ich eine console.log mache.

Das Problem ist, dass Diagramm js die Arrays nicht mag, weil nichts zeigt, nicht einmal Fehlermeldungen.

Hat jemand ein ähnliches Problem? Was kann falsch sein?

Meny danke !!!

Answer 1

dieses Versuchen Hier ist Ihre html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
<canvas id="myChart" width="200" height="100"></canvas> 

hier ist Ihre js

var arr=["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]; 
var ctx = document.getElementById('myChart').getContext('2d'); 
var chart = new Chart(ctx, { 
     // The type of chart we want to create 
     type: 'bar', 
     // The data for our dataset 
     data: { 
      labels:arr, 
      datasets: [{ 
       label: "My First dataset", 
       backgroundColor: 'rgb(255, 99, 132)', 
       borderColor: 'rgb(255, 99, 132)', 
       data: [0, 10, 5, 2, 20, 30, 45, 5, 2, 20, 30, 45], 
      }] 
     }, 

     // Configuration options go here 
     options: {} 
    });