Chart.js를 사용하여 여러 꺾은선형 차트 + 막대형 차트 표시

웹페이지에 그래프를 표시하고자 하는 요구사항이 있으며 그래프 도구를 찾고 있었습니다.
복수의 꺾은선 그래프＋바 그래프와 같은 복수 종류의 그래프를 표시할 수 있는 툴을 확 발견할 수 없었습니다만, Chart.js로 실현할 수 있었으므로 소개하겠습니다.
JS 아마추어 나도 쉽게 멋있는 그래프를 만들 수있었습니다.

Chart.js란?

JavaScript의 차트 라이브러리입니다.
htps //w w. 찬 rtjs. rg/

내 소스를 참고하지 않고 공식적인 훌륭한 샘플이 있으므로 그쪽을 보는 것이 더 좋을 수 있습니다.
Chart.js 공식 샘플 사이트
GitHub
↑ Combo bar/line 가 참고가 될까 생각합니다.

표시 결과

샘플 소스

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>

Reference

이 문제에 관하여(Chart.js를 사용하여 여러 꺾은선형 차트 + 막대형 차트 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matyahiko2831/items/30c09416dcb334a5576f

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다