Mein Tortendiagramm (chartJs) erscheint nicht

i mit ein kleines Problem haben Chart jsMein Tortendiagramm (chartJs) erscheint nicht

Ich möchte ein Kreisdiagramm zeichnen, aber die Seite bleibt leer, wenn ich referch es

mein Code ist wie folgt , ich habe Zweifel mit Online-src von Skript-Tag:

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>C.H.A.R.T.JS</title> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
 
</head> 
 

 
<body> 
 
<canvas id="myChart" width="400" height="400"></canvas> 
 
<script> 
 
$(function() 
 
{ 
 
//$('body').css({'background':'red'}); 
 
var ctx = $("#myChart").get(0).getContext("2d"); 
 

 
var data = [ 
 
\t \t \t \t { 
 
\t \t \t \t \t value :270, 
 
\t \t \t \t \t color :'Dodgerblue', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed1' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t value :50, 
 
\t \t \t \t \t color :'Red', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed2' 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t value :40, 
 
\t \t \t \t \t color :'yellow', 
 
\t \t \t \t \t heightLight: 'Lightskyblue', 
 
\t \t \t \t \t label :'Imed3' 
 
\t \t \t \t } 
 
\t \t ]; 
 
var pieChart = new Chart(ctx).Pie(data); 
 
}); // fin jQuery 
 

 

 
</script> 
 

 
</body> 
 
</html>

danken Ihnen im Voraus

Quelle

2016-08-31 iMed

Ich denke, Ihre Datenstruktur verwenden chartJS1, aber Ihr CDN ist chartJS2.
das ist, warum Sie nur Fehler msg.

var ctx = $("#myChart").get(0).getContext("2d"); 

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#4BC0C0", 
       "#FFCE56" 
      ], 
      label: 'My dataset' 
     }] 
}; 
var myPieChart = new Chart(ctx,{ 
    type: 'pie', 
    data: data, 
});

Quelle

2016-08-31 11:21:02 Anami

vielen Dank ... es funktioniert jetzt! =) – iMed

aber wie kann ich es kleiner machen? es ist zu groß ... CSS? – iMed

@ user5080818 Sie können mit 'Optionen: {responsive: false} 'steuern, ob es reagiert oder nicht. Sie können das wie folgt eingeben: data: data, options: {responsive: false} '. Es reagiert standardmäßig auf den übergeordneten Container. Sie können einen übergeordneten Container mit einer maximalen Breite oder einer vordefinierten Breite/Höhe festlegen. Oder Sie könnten etwas wie '#myChart {max-width: 400px;}' machen. Bei maximaler Breite bleibt es ansprechend, wenn der übergeordnete Container kleiner wird. – user3366016

Versuchen Sie, das Diagramm mit dieser Struktur in den Dokumenten zu erstellen.

Sieht aus wie Ihre Struktur ein wenig aus basierend auf den Dokumenten ist. http://www.chartjs.org/docs/#doughnut-pie-chart

var ctx = document.getElementById("myChart").getContext("2d"); 

// For a pie chart 
var myPieChart = new Chart(ctx,{ 
    type: 'pie', 
    data: data, 
    options: options 
});` 

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ] 
     }] 
};

Es ist ansprechbar standardmäßig erweitert, um es Eltern-Container. Sie können einen übergeordneten Container mit maximaler Breite oder die Zeichenfläche selbst festlegen, damit sie für kleinere Bildschirme reaktionsfähig bleibt.

<style type="text/css"> 
    #myChart { 
     max-width: 400; 
    } 
</style>

Oder wenn Sie es überhaupt nicht reagieren möchten, können Sie diese Option auf false setzen.

options: {responsive: false}

Quelle

2016-08-31 11:16:24 user3366016

Vielen Dank für die Beantwortung Ich werde Ihren Link folgen ... Danke – iMed

noch einmal vielen Dank ... für CSS hatte ich px 400 hinzufügen, um es funktioniert, aber ich bevorzuge diese ein: Optionen: {responsive: false} – iMed

danke für alle! mein Problem ist gelöst =) – iMed

Mein Tortendiagramm (chartJs) erscheint nicht

Antwort

Verwandte Themen