ChartJS ‚Hallo Welt‘ nicht Animieren

Ich habe versucht, das ChartJS Beispiel von http://www.chartjs.org/docs/latest/ zum Laufen zu bringen, aber ich laufe in zwei unerwartete Probleme:ChartJS ‚Hallo Welt‘ nicht Animieren

Die Grafik ist nicht
Der Graph Animieren ist riesig (es scheint, die Eigenschaften height/width auf dem canvas-Element zu ignorieren).

Snippet (aus der Dokumentation kopiert) ist hier: https://codepen.io/anon/pen/KmOQoj

<html> 
<head> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"> 
</script> 
<script> 
function load() { 
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 
       } 
      }] 
     } 
    } 
}); 
} 
</script> 
</head> 
<body onload="load()"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</body> 
</html>

Quelle

2017-05-31 plexer

hier Code arbeiten

halten Leinwand innerhalb div und setzen Höhe und Breite für div und machen Diagramm als reaktions

function load() { 
 
    var ctx = document.getElementById("myChart").getContext('2d'); 
 
    var myChart = new Chart(ctx, { 
 
     type: 'bar', 
 
     responsive:true, 
 
    maintainAspectRatio: false, 
 
     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:false 
 
        } 
 
       }] 
 
      } 
 
     } 
 
    }); 
 
}

<html> 
 
<head> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 
 
</head> 
 
<body onload="load()"> 
 
    <div style="width:400px;height:400px"> 
 
<canvas id="myChart" width="400" height="400"></canvas> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-05-31 16:54:29

hier ist mein Codepen https://codepen.io/dineshu07/pen/ZKgrNW –

ChartJS ‚Hallo Welt‘ nicht Animieren

Antwort

Verwandte Themen