48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style type="text/css">
|
|
.my-chart-container {
|
|
max-width: 600px;
|
|
max-height: 400px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<h3>Case.1 basic pattern</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-1" width="600" height="200"></canvas>
|
|
</div>
|
|
|
|
<h3>Case.2 stack group pattern</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-2" width="600" height="300"></canvas>
|
|
</div>
|
|
|
|
<h3>Case.3 stacked vertical bar</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-3" width="600" height="300"></canvas>
|
|
</div>
|
|
|
|
<h3>Case.4 stacked area</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-4" width="600" height="300"></canvas>
|
|
</div>
|
|
|
|
<h3>Case.5 stacked area with objects as data points</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-5" width="600" height="300"></canvas>
|
|
</div>
|
|
|
|
<h3>Case.6 horizontal bar chart with objects as data points</h1>
|
|
<div class="my-chart-container">
|
|
<canvas id="my-chart-6" width="600" height="200"></canvas>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://npmcdn.com/chart.js@<3.0.0/dist/Chart.bundle.min.js"></script>
|
|
<script type="text/javascript" src="../src/index.js"></script>
|
|
<script type="text/javascript" src="./index.js"></script>
|
|
</body>
|
|
</html>
|