C3.iOS에서 js의 LINE chart를 사용한 후 매우 무겁다(해결됨)

8329 단어 c3.jsJavaScriptline-chartiOS
C3.이것은 js라는 도표 그리기 라이브러리의line chart에 대한 글입니다.

C3.js 소개


C3.jsjavascript로 도표를 만들 수 있는 프로그램 라이브러리입니다.각양각색의 도표를 그릴 수 있어 매우 편리하다.이번에는 그중의 라인 차트에 대해서.

현상.


C3.js의 LINE chart를 사용하여 300point의 데이터를 배열한 20개의 line chart를 그린 웹 페이지를 만들었습니다.재현 프로그램을 편집했기 때문에 다음 샘플 프로그램의 데이터는 무작위로 생성됩니다.

Mac의 사파리와 크롬은 문제없이 운행되고 있지만 iOS의 터미널에서 같은 페이지를 방문하면 이상하게 동작이 느려 간혹 떨어지는 현상이 발생한다.
처음에는 데이터의 전송량이 너무 많고 반응이 없다고 생각했는데 iOS의javascript로 처리하면 데이터가 너무 많은데 좀 다른 것 같아요.
c3-sample.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.min.js"></script>
  </head>

  <body>
    <div id="chart"></div>
  </body>

  <script>
    const chartObj = {
      bindto: '#chart',
      size: { width: 1280, height: 600 },
      point: { show: false },
      tooltip: { show: false },
      data: {
        columns: [],
      },
    };
    for(let i = 0; i < 20; i++) {
      chartObj.data.columns[i] = ['data' + i];
      for(let j = 0; j < 300; j++) {
        let d = Math.random() * 100;
        if(j == 0) {
          chartObj.data.columns[i].push(d);
        } else {
          d = chartObj.data.columns[i][j] + (d / 10 - 5);
          if(d < 0) d = 0;
          if(d > 100) d = 100;
          chartObj.data.columns[i].push(d);
        }
      }
    }
    c3.generate(chartObj);
  </script>
</html>

문제점


Safari의 inspector로 내용을 시험해 봤습니다. c3.왜냐하면 js의 도표는svg로 그린 것 같아서 그중을 다시 한 번 보면<g class="c3-chart-lines"> 아래<g class="c3-chart-line c3-target c3-target-data0">부터 순차적으로 20개의 LINE이 있습니다.
다시 안을 들여다보다
있음<g class=" c3-shapes c3-shapes-data0 c3-lines c3-lines-data0">, 라인 차트에 선을 그은 데이터입니다.
여기까지는 전혀 문제가 없다.
그다음에 나오는 건요.<g class=" c3-shapes c3-shapes-data0 c3-circles c3-circles-data0" style="cursor: pointer;">그런데<circle class="c3-shape c3-shape-0 c3-circle c3-circle-0" r="2.5" cx="13" cy="467.5179823348915" style="fill: rgb(31, 119, 180); opacity: 0;"> 라인 차트의 포인트가 모두 존재합니다.
20x300=6000개의 circle을 그렸는데 무거워 보입니다.
물론 line chart에point가 표시되면busy로 표시되기 때문에 삭제로 설정되지만point: { show: false }, 어디서 작용하는지opacity: 0;부분인 것 같습니다.

해결책


결과적으로 이미지 등에 비해 데이터의 양이 문제의 크기가 아니기 때문에circle를 그리지 않으면 된다는 생각에 css에 다음 스타일을 추가했습니다.
.c3-circles {
  display: none;
}
이렇게 하면 도표의 굴림과 그리기가 쉽게 이동할 수 있다.
나의 첫 번째 NPM 패키지를 발표했다. 다음은 내가 배운 것이다
[HomeKit 대응 사양] Philips Hue 화이트 그래디언트 램프

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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