JavaScript 関数を使用したグラフとデータの視覚化-jsチュートリアル-php.cn

JavaScript 関数を使用したグラフとデータの視覚化

王林

リリース： 2023-11-04 16:00:19

オリジナル

609 人が閲覧しました

JavaScript 関数を使用したグラフとデータの視覚化

JavaScript 関数を使用してグラフとデータ視覚化を実装する

インターネットの普及とビッグデータの台頭により、データ視覚化の重要性がますます高まっています。視覚化により、データの分布、傾向、相互関係をより明確に理解できるようになり、より適切な意思決定や推論が可能になります。この記事では、JavaScript 関数を使用してグラフ作成とデータ視覚化を行う方法について説明します。

1. Canvas を使用して基本的なグラフィックを描画する

JavaScript は強力な描画 API、Canvas を提供します。 Canvas 要素を HTML ページに追加すると、JavaScript 関数を使用して長方形、円、線などの基本的な形状を描画できます。

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  // 绘制矩形
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);

  // 绘制圆形
  ctx.beginPath();
  ctx.arc(250, 250, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();

  // 绘制线条
  ctx.beginPath();
  ctx.moveTo(400, 400);
  ctx.lineTo(450, 450);
  ctx.strokeStyle = "green";
  ctx.stroke();
</script>

ログイン後にコピー

上記のコードは、500x500 ピクセルの Canvas 上に赤い四角形、青い円、緑の線を描画します。

2. データ視覚化に Chart.js を使用する

基本的なグラフィックの描画に加えて、JavaScript ライブラリを使用してより複雑なデータ視覚化を行うこともできます。 Chart.js は、棒グラフ、折れ線グラフ、円グラフなど、さまざまな種類のグラフを描画できるシンプルで使いやすい API を提供する、非常に人気のあるデータ視覚化ライブラリです。

まず、Chart.js ライブラリを導入する必要があります:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

ログイン後にコピー

次に、次のコードを使用して単純なヒストグラムを作成できます:

<canvas id="myChart"></canvas>

<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)",
          ],
          borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)",
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
</script>

ログイン後にコピー

上記のコードは、 a さまざまな色の列で表されるさまざまなカテゴリのデータを示す棒グラフ。

3. D3.js を使用して、より複雑な視覚化効果を作成する

より高度なデータ視覚化効果が必要な場合は、D3.js ライブラリを使用できます。 D3.js は、力指向図、ヒートマップ、マップなど、さまざまな複雑な視覚化を作成するのに役立つ強力な JavaScript ライブラリです。

以下は、単純な力指向グラフの例です:

<svg id="mySVG" width="500" height="500"></svg>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  var svg = d3.select("#mySVG");
  var width = svg.attr("width");
  var height = svg.attr("height");

  var nodes = [
    { id: 0, name: "Node 0" },
    { id: 1, name: "Node 1" },
    { id: 2, name: "Node 2" },
    { id: 3, name: "Node 3" },
    { id: 4, name: "Node 4" },
  ];

  var links = [
    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 2, target: 3 },
    { source: 3, target: 4 },
    { source: 4, target: 0 },
  ];

  var simulation = d3
    .forceSimulation(nodes)
    .force(
      "link",
      d3.forceLink(links).id(function (d) {
        return d.id;
      })
    )
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

  var link = svg
    .selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .attr("class", "link");

  var node = svg
    .selectAll(".node")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("r", 10);

  node.append("title").text(function (d) {
    return d.name;
  });

  simulation.on("tick", function () {
    link
      .attr("x1", function (d) {
        return d.source.x;
      })
      .attr("y1", function (d) {
        return d.source.y;
      })
      .attr("x2", function (d) {
        return d.target.x;
      })
      .attr("y2", function (d) {
        return d.target.y;
      });

    node.attr("cx", function (d) {
      return d.x;
    }).attr("cy", function (d) {
      return d.y;
    });
  });
</script>

ログイン後にコピー

上記のコードは、5 つのノードと 5 つのエッジを含む力指向グラフを作成し、SVG 上に表示します。

概要:

JavaScript 関数を使用すると、単純なグラフ描画とより複雑なデータ視覚化効果を実現できます。 Canvas を使用して基本的なグラフィックを描画する場合でも、Chart.js および D3.js ライブラリを使用してデータ視覚化を行う場合でも、JavaScript 関数は不可欠なツールです。この記事がお役に立てば幸いです!

以上がJavaScript 関数を使用したグラフとデータの視覚化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。