Я работаю над своим последним проектом для курса и изо всех сил пытаюсь понять ошибку, которую я имею с cal-heatmap, библиотекой Javascript, которая может создавать тепловые карты, такие как календарь вклада Github.
Когда я создаю файл HTML на моем компьютере и открываю его в Chrome, все выглядит идеально.
Идеально
Когда я создаю тот же файл HTML в IDE CS50и откройте его после размещения сервера через CS50 IDE с Flask / Apache, вещь выглядит не идеально.
Не идеально
Вот код, взяты из этого урока .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cal-Heatmap Samples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h2>
Cal-HeatMap Samples</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading"><span class="glyphicon glyphicon-equalizer"></span> Service Call Statistics</div>
<div class="panel-body">
<div id="heatmap-navigation">
<button id="heatmap-previous" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button id="heatmap-next" style="margin-bottom: 5px;" class="btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
<div id="cal-heatmap">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var cal = new CalHeatMap();
cal.init({
domain: "month",
subDomain: "day",
cellSize: 20,
itemName: ["service ticket", "service tickets"],
data: {
"1452019700": 40,
"1454688100": 50,
"1452710900": 5,
"1452883700": 15,
"1453142900": 15,
"1453488500": 30,
"1456239700": 80,
"1453662300": 20,
"1455130100": 60,
"1455562100": 70,
"1455131100": 10,
"1456166900": 30,
"1456399000": 12,
"1451674100": 90
},
subDomainTextFormat: "%d",
range: 3,
displayLegend: true,
domainMargin: 20,
animationDuration: 800,
domainDynamicDimension: false,
start: new Date(2016, 01, 01),
end: new Date(2016, 02, 26),
scale: [10, 20, 80],
previousSelector: "#heatmap-previous",
nextSelector: "#heatmap-next",
});
</script>
</body>
</html>
Что дает?Почему я получаю разные результаты с одинаковым кодом?
Спасибо за вашу помощь!