Help us understand the problem. What is going on with this article?

Chart.jsを使って複数の折れ線グラフ+棒グラフを表示する

More than 1 year has passed since last update.

Webページにグラフを表示させたいという要件があり、グラフツールを探していました。
複数の折れ線グラフ+棒グラフのような複数種類のグラフを表示できるツールがパッと発見できなかったのですが、Chart.jsで実現できたので紹介させていただきます。
JS素人の私でも簡単にカッコいいグラフが作成できました。

Chart.jsとは

JavaScriptのチャートライブラリです。
https://www.chartjs.org/

私のソースを参考にしなくても、公式の素晴らしいサンプルがありますので、そちらを見たほうが良いかもしれません。
Chart.js 公式サンプルサイト
GitHub
Combo bar/lineが参考になるかと思います。

表示結果

image.png

サンプルソース

chartjs_sample.html
<!DOCTYPE html>
<HTML>

<HEAD>
    <TITLE>chart.jsサンプル</TITLE>
</HEAD>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<body>
    <canvas id="myChart"></canvas>
    <script type="text/javascript">
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07'],
                datasets: [{
                    label: '折れ線A',
                    type: "line",
                    fill: false,
                    data: [10000, 11000, 15000, 12000, 9000, 12000, 13000],
                    borderColor: "rgb(154, 162, 235)",
                    yAxisID: "y-axis-1",
                }, {
                    label: '折れ線B',
                    type: "line",
                    fill: false,
                    data: [8000, 9000, 10000, 9000, 6000, 8000, 7000],
                    borderColor: "rgb(54, 162, 235)",
                    yAxisID: "y-axis-1",
                }, {
                    label: '棒グラフ',
                    data: [22, 23, 10, 15, 40, 35, 30],
                    borderColor: "rgb(255, 99, 132)",
                    backgroundColor: "rgba(255, 99, 132, 0.2)",
                    yAxisID: "y-axis-2",
                }]
            },
            options: {
                tooltips: {
                    mode: 'nearest',
                    intersect: false,
                },
                responsive: true,
                scales: {
                    yAxes: [{
                        id: "y-axis-1",
                        type: "linear",
                        position: "left",
                        ticks: {
                            max: 15000,
                            min: 0,
                            stepSize: 1000
                        },
                    }, {
                        id: "y-axis-2",
                        type: "linear",
                        position: "right",
                        ticks: {
                            max: 200,
                            min: 0,
                            stepSize: 5
                        },
                        gridLines: {
                            drawOnChartArea: false,
                        },
                    }],
                },
            }
        });

    </script>
</body>

</HTML>
matyahiko2831
インプットしたこと・考えたことを言語化する練習をしています!お気軽にコメントください♪
https://www.adglobe.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away