Chart.js v2에서 클릭 이벤트를 처리하는 방법

19298 단어 chart.js자바스크립트DataVisualizationgraphVisualization

요약


  • v1에서는 그래프별로 이벤트에서 데이터로 변환하는 방법이 다릅니다
  • v2에서 모든 그래프에서 getElementAtEvent 또는 getElementsAtEvent로 통합

    • 배경



    Chart.js은 v2에서 큰 변화가 있습니다.
    공식적인 migration 지원 문서는 없습니다.
    Issue이 있지만 손이 많이 돌지 않는 것 같습니다.

    그래프를 만드는 방법의 변경 사항은 v1.0의 변경 사항을 참조하십시오.

    그래프의 이벤트 처리에도 변경이 있습니다.
    이 기사에서는 이벤트 처리의 변경 사항을 정리합니다.

    Chart.js에서 클릭 이벤트 처리



    Chart.js는 Canvas를 사용하여 그래프를 그립니다.
    Canvas는 요소에 이벤트 핸들러를 설정할 수 없습니다.
    Chart.js는 Canvas의 이벤트 핸들러의 이벤트 객체를 그래프의 요소로 변환하는 API를 제공합니다.

    v1과 v2에서는 변환 API가 변경되었습니다.

    Chart.js v1



    샘플 코드



    v1.html
    <!doctype html>
<html>

<head>
    <title>Bar Chart</title>
    <script src="node_modules/chart.js/Chart.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const barChartData = {
            "labels": [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July"
            ],
            "datasets": [{
                "fillColor": "rgba(220,220,220,0.5)",
                "strokeColor": "rgba(220,220,220,0.8)",
                "highlightFill": "rgba(220,220,220,0.75)",
                "highlightStroke": "rgba(220,220,220,1)",
                "data": [
                    91,
                    77,
                    21,
                    60,
                    61,
                    59,
                    83
                ]
            }, {
                "fillColor": "rgba(151,187,205,0.5)",
                "strokeColor": "rgba(151,187,205,0.8)",
                "highlightFill": "rgba(151,187,205,0.75)",
                "highlightStroke": "rgba(151,187,205,1)",
                "data": [
                    8,
                    67,
                    96,
                    87,
                    77,
                    5,
                    7
                ]
            }]
        }

        const canvas = document.querySelector("#canvas")
        const ctx = canvas.getContext("2d")
        const chart = new Chart(ctx).Bar(barChartData)

        canvas.addEventListener('click', (e) => console.log(chart.getBarsAtEvent(e)))
    </script>
</body>

</html>

    시작


    npm init -y
npm install [email protected]
    v1.html를 브라우저에서 엽니다.



    이러한 그래프가 표시됩니다.

    클릭 이벤트 처리



    v1에서는 막대 그래프의 경우 getBarsAtEvent을 사용하여 MouseEvent에서 클릭 한 데이터 (정확하게는 클릭했을 때 tooltip을 표시하는 데이터)를 가져옵니다.
    getBarsAtEvent 메서드를 사용하면 다음과 같이 ChartElement 배열로 변환됩니다.



    하나의 ChartElement에는 다음 정보가 포함됩니다.
    {
  "value": 83,
  "label": "July",
  "strokeColor": "rgba(220,220,220,1)",
  "fillColor": "rgba(220,220,220,0.75)",
  "highlightFill": "rgba(220,220,220,0.75)",
  "highlightStroke": "rgba(220,220,220,1)",
  "_saved": {
    "value": 83,
    "label": "July",
    "strokeColor": "rgba(220,220,220,0.8)",
    "fillColor": "rgba(220,220,220,0.5)",
    "highlightFill": "rgba(220,220,220,0.75)",
    "highlightStroke": "rgba(220,220,220,1)",
    "width": 13,
    "x": 268,
    "y": 87.04210613821667
  },
  "width": 13,
  "x": 268,
  "y": 35.13798272595014,
  "base": 87.04210613821667
}
    value와 label를 사용하면 클릭 한 요소를 얻을 수 있습니다.

    Chart.js v2



    샘플 코드



    v2.html
    <!doctype html>
<html>

<head>
    <title>Bar Chart</title>
    <script src="node_modules/chart.js/dist/Chart.bundle.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const barChartData = {
            "labels": [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July"
            ],
            "datasets": [{
                "label": "Dataset 1",
                "backgroundColor": "rgba(220,220,220,0.5)",
                "data": [
                    3, -27, -46,
                    56, -87, -82,
                    86
                ]
            }, {
                "label": "Dataset 2",
                "backgroundColor": "rgba(151,187,205,0.5)",
                "data": [-88, -78,
                    74, -32,
                    35,
                    29,
                    62
                ]
            }]
        }

        const canvas = document.querySelector("#canvas")
        const ctx = canvas.getContext("2d")
        const chart = new Chart(ctx, {
            type: 'bar',
            data: barChartData
        })

        canvas.addEventListener('click', (e) => console.log(chart.getElementsAtEvent(e)))
    </script>
</body>

</html>

    시작


    npm init -y
npm install chart.js@latest
    v2.html를 브라우저에서 엽니다.



    이러한 그래프가 표시됩니다.

    클릭 이벤트 처리



    v2에서는 getElementsAtEvent을 사용하여 MouseEvent에서 클릭한 데이터를 검색합니다.
    getElementsAtEvent 메서드를 사용하면 다음과 같이 ChartElement 배열로 변환됩니다.


    ChartElement에 포함된 정보도 변경되었습니다.
    {
  "_datasetIndex": 0,
  "_index": 6,
  "hidden": false,
  "_model": {
    "x": 989.6839904785156,
    "y": 67,
    "label": "July",
    "datasetLabel": "Dataset 1",
    "base": 279,
    "width": 54,
    "backgroundColor": "rgba(196, 196, 196, 0.5)",
    "borderSkipped": "bottom",
    "borderColor": "rgba(0, 0, 0, 0.1)",
    "borderWidth": 0
  },
  "_view": {
    "x": 989.6839904785156,
    "y": 67,
    "label": "July",
    "datasetLabel": "Dataset 1",
    "base": 279,
    "width": 54,
    "backgroundColor": "rgba(196, 196, 196, 0.5)",
    "borderSkipped": "bottom",
    "borderColor": "rgba(0, 0, 0, 0.1)",
    "borderWidth": 0
  },
  "_start": null
}
    label가 _model 아래로 이동 중입니다.
    또한 value는 사라졌습니다.
    대신 _datasetIndex 및 _index가 있습니다. 원본 데이터에서 가져올 수 있습니다.

    참고


  • Chart.js의 선 그래프에 선택 기능 추가 - Qiita
  • Chart.js v2.0에서 시계열 그래프 그리기 - Qiita
    • react-chartjs를 사용하여 누적 그래프 그리기
    Chart.js(v2)에서 선 그래프에서 선택 부분을 강조 표시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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