ロゴ メインコンテンツへ
RSSフィード
「Web 開発」に関連する記事一覧

Chart.js のシンプルな折れ線グラフのサンプル

2019/01/03
(この記事の文字数: 148)

Chart.js の折れ線グラフのサンプルで、バージョン2.1.4で動作するシンプルなサンプルが軽く検索してなかったのでメモ用に貼っておきます。以下が実行結果で描画された折れ線グラフです。

以下が上記のグラフを描画しているHTMLとJavaScriptです。CDN版なのでコピペすれば動くと思います。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<div style='width:300px;height:300px;text-align:center'><canvas id="myChart" width="300" height="300"></canvas></div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var data = {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    datasets: [
        {
            label: "Prime",
            backgroundColor: Chart.helpers.color('rgb(235, 62, 35)').alpha(0.5).rgbString(),
            borderColor: 'rgb(235, 62, 35)',
            pointBackgroundColor: 'rgb(235, 62, 35)',
            data: [2, 3, 5, 7, 11, 7, 3, 4, 8, 14]
        },
        {
            label: "Second",
            backgroundColor: Chart.helpers.color('rgb(54, 162, 235)').alpha(0.5).rgbString(),
            borderColor: 'rgb(54, 162, 235)',
            pointBackgroundColor: 'rgb(54, 162, 235)',
            data: [0, 1, 3, 2, 3, 5, 8, 13, 11, 4]
        }
    ]
};
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {}
});
</script>


  このエントリーをはてなブックマークに追加  

<<「Web 開発」の記事一覧に戻る

コメント(0 件)



コンテンツロード: 0.0072 sec
Copyright(C)2006-2024 puarts All Rights Reserved