Hallo zusammen
Eine Frage bezüglich der Library Chart.js in Verbindung mit Bottle.
Ich ich habe ein exempel chart exempel.zip von Chart.js das funktioniert so weit lokal (PC) auch ohne Probleme. Nun habe ich die Dateien in meine Bottle Umgebung eingebunden. Aber das darstellen durch Chart.js geht nicht mehr sprich die Seite wird dargestellt aber ohne einen Ansatz von einer Grafik (Raspi). Wo drückt der Schuh? Wieso wird die Grafik nicht dargestellt?
Hier mal den Code als Ganzes my_web_app.zip
Muss ich noch was installieren?
HTML: Index.tpl
%rebase('main', title='Chart')
<br>
<br>
<!DOCTYPE html>
<html>
<head>
<title>World population</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<h3>Test Cart.js</h3>
<canvas id="myChart" width="1000" height="500"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
Alles anzeigen
JavaScript: script.js
// Our labels along the x-axis
var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
// For drawing the lines
var africa = [86,114,106,106,107,111,133,221,783,2478];
var asia = [282,350,411,502,635,809,947,1402,3700,5267];
var europe = [168,170,178,190,203,276,408,547,675,734];
var latinAmerica = [40,20,10,16,24,38,74,167,508,784];
var northAmerica = [6,3,2,2,7,26,82,172,312,433];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
data: africa,
label: "Africa",
borderColor: "#3e95cd",
fill: false
},
{
data: asia,
label: "Asia",
borderColor: "#8e5ea2",
fill: false
},
{
data: europe,
label: "Europe",
borderColor: "#3cba9f",
fill: false
},
{
data: latinAmerica,
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
},
{
data: northAmerica,
label: "North America",
borderColor: "#c45850",
fill: false
}
]
}
});
Alles anzeigen