Chart.jsはいくつかの異なる方法で組み込むことができます:
NPM
NPMプロジェクトディレクトリで次のコマンドを実行します。
npm install chart.js --save
CDN
chart.js CDNにリンクするHTMLにスクリプトタグを含めます
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
</body>
</html>
最新バージョンはcdnjs.com/libraries/Chart.jsにあります。
ローカルコピー
ローカルコピーをサーバー上でホストすることもできます。最後のバージョンはGitHubから入手できます 。
<html>
<body>
<script type="text/javascript" src="/Path/To/Chart.bundle.min.js"></script>
</body>
</html>
chart.jsの取得の詳細については参照してインストールwww.chartjs.org/docs/を 。
使用しているChart.JSのバージョン(現在のバージョンは2.X)に応じて、構文が異なり、棒グラフ( 2.XのJSFiddle Demo )の最小例が作成されます。
<html>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Group 1", "Group 2", "Group 3"],
datasets: [{
label: 'Groups',
data: [12, 19, 3]
}]
}
});
</script>
</body>
</html>
少し高度なバージョンがchart.jsのドキュメント ( JSFiddle Demo )にあります。
ただし、レガシーバージョンを使用する必要がある場合は、まずGithubのドキュメントを参照してください。
次に、棒グラフ( JSFiddle Demo )の最小限の例を示します。
<html>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart= new Chart(ctx).Bar({
labels: ["Group 1", "Group 2", "Group 3"],
datasets: [
{
label: "Group",
data: [12, 19, 3]
}]
});
</script>
</body>
</html>
もう少し進んだこのバージョンはGithubのドキュメント ( JSFiddle Demo )にあります。