More than 5 years have passed since last update.

chart.js で折れ線グラフを作成

Last updated at 2015-04-07Posted at 2015-04-07

概要

chart.js で折れ線グラフを作成します。

サンプル

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Chart Test</title>
  <script src="Chart.min.js"></script>
  <script language="JavaScript"><!--
  function displayLineChart() {
    var data = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
            {
                label: "Prime and Fibonacci",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
            }
        ]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = { };
    var lineChart = new Chart(ctx).Line(data, options);
  }
  --></script>
</head>
<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>
</html>

Gist

Chart.js 折れ線グラフサンプル Gist

デモ

Chart.js 折れ線グラフサンプルデモ

外部資料

chart.js docs

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up