SVG로 그래프 작성

데이터에서 그래프를 표시하고 싶을 때 여러분 무엇을 사용합니까?

그래프 그리는 js 라이브러리는
h tp // w w. jsg 등 phs. 코m/
이렇게 있습니다.

대표적인 것은
ht tp // // 등 p는 예 ljs. 코m/
h tp // w w. 찬 rtjs. rg/
htp // d3js. rg/
같은 곳입니까?

Canvas이지만 SVG이지만 데이터에서 그래프를 그려준다면 디자인이 맞으면 뭐든지 좋네요.
어떻게 그리는지 궁금해 버렸기 때문에 소스를 보면 SVG 태그가 있고 그 안에 path 인 circle 태그가 많이 쓰여졌습니다.

SVG란?
htps : // 그럼.ぃきぺぢ아. 오 rg / uki / S ka b ぇ_ ゔ ぇ c와 r_G 등 p 히 cs
SVG의 사양은 W3C에 의해 개발되어 오픈 표준으로 권고되었다.
XML로 작성하기 때문에 브라우저에서 열람 할 수 있으며 텍스트 편집기 등으로 편집 할 수 있습니다.

이것은 스스로 쓸 수 있지 않을까.
쓰려고 했습니다.

완성형(그렇게 완성되지는 않았지만)

SVG의 그리기 영역을 지정합니다. svg

viewbox와 width, height의 관계는 다른 기사에 양보합니다만, width, height는 통상의 브라우저의 묘화 범위를 지정. viewbox는 피사체(이미지)의 어디를 잘라낼지를 x, y, 폭, 높이를 지정하고 있습니다.

종횡의 기준이 되는 선을 그립니다. 라인

x, y축의 포인트가 되는 장소에 텍스트를 배치합니다. text

그래프를 작성합니다. path

  <div class="main" style="background-color: #ccc;">
    <div class="graph">
      <svg version="1.1" viewbox="0 0 1500 1000" width="100%" height="1000" id="graph">
        <line x1="150"  y1="10" x2="150" y2="1000" style="stroke:#fafafa;"/>
        <line x1="0"  y1="800" x2="1500" y2="800" style="stroke:#fafafa;"/>

        <text x="100" y="175" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">300</tspan>
        </text>
        <text x="100" y="375" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">200</tspan>
        </text>
        <text x="100" y="575" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">100</tspan>
        </text>

        <text x="200" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">4</tspan>
        </text>
        <text x="300" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">5</tspan>
        </text>
        <text x="400" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">6</tspan>
        </text>
        <text x="500" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">7</tspan>
        </text>
        <text x="600" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">8</tspan>
        </text>
        <text x="700" y="840" text-anchor="end" font-family="sans-serif" font-size="12px" stroke="none" fill="#ffffff" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: end; font-family: sans-serif; font-size: 12px; font-weight: normal;" font-weight="normal">
          <tspan dy="4" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">9</tspan>
        </text>
      </svg>
    </div>
  </div>

  <script type="text/javascript">
    var data = [6, 4, 2, 2, 2, 3, 5, 2];
    var d = "M";
    var x = 0;
    data.forEach(function(element, index, ar) {
      d = d + (200 + index * 100) + "," + (800 - (100 * element)) + " ";
    });
    var graph = document.getElementById("graph");
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", d);
    path.setAttribute("fill", "none");
    path.setAttribute("stroke", "#fafafa");
    path.setAttribute("stroke-width", "2");
    path.setAttribute("stroke-linecap", "round");
    path.setAttribute("stroke-linejoin", "round");
    graph.appendChild(path);
  </script>

동적 그래프를 작성하고 싶기 때문에 path는 Javascript로 배열에서 그립니다.
정적인 그래프라면 태그를 쓰는 것으로 그리기가 가능합니다.

CSS도 적용할 수 있고, 사용미치는 많이 있을 것 같네요.
하지만 제품에 넣을 때는 뭔가 라이브러리를 사용하고 싶습니다 w