Carta dan visualisasi data menggunakan fungsi JavaScript

Gunakan fungsi JavaScript untuk melaksanakan carta dan visualisasi data

Dengan populariti Internet dan peningkatan data besar, visualisasi data semakin menjadi semakin popular penting. Melalui visualisasi, kita boleh mempunyai pemahaman yang lebih jelas tentang pengedaran, aliran dan perkaitan data, membolehkan kita membuat keputusan dan inferens yang lebih baik. Dalam artikel ini, kami akan membincangkan cara menggunakan fungsi JavaScript untuk carta dan visualisasi data.

1 Gunakan Kanvas untuk melukis grafik asas

JavaScript menyediakan API lukisan yang berkuasa - Kanvas. Dengan menambahkan elemen Kanvas pada halaman HTML, kami boleh menggunakan fungsi JavaScript untuk melukis bentuk asas seperti segi empat tepat, bulatan dan garisan.

<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>

Kod di atas melukis segi empat tepat merah, bulatan biru dan garis hijau pada Kanvas 500x500 piksel.

2. Gunakan Chart.js untuk visualisasi data

Selain melukis grafik asas, anda juga boleh menggunakan perpustakaan JavaScript untuk visualisasi data yang lebih kompleks. Chart.js ialah perpustakaan visualisasi data yang sangat popular yang menyediakan API yang ringkas dan mudah digunakan yang boleh melukis pelbagai jenis carta, termasuk carta bar, carta garis, carta pai, dsb.

Pertama, kita perlu memperkenalkan perpustakaan Chart.js:

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

Kemudian, kita boleh menggunakan kod berikut untuk mencipta histogram ringkas:

<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>

#🎜 🎜 #Kod di atas mencipta histogram yang memaparkan kategori data berbeza yang diwakili oleh lajur warna yang berbeza.

3 Gunakan D3.js untuk mencipta visualisasi yang lebih kompleks

Jika anda memerlukan visualisasi data yang lebih maju, anda boleh menggunakan pustaka D3.js. D3.js ialah perpustakaan JavaScript yang berkuasa yang boleh membantu kami mencipta pelbagai visualisasi yang kompleks, seperti gambar rajah terarah daya, peta haba, peta, dsb.

Berikut ialah contoh graf terarah daya ringkas:

<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>

Kod di atas mencipta graf terarah daya yang mengandungi 5 nod dan 5 tepi, dan memaparkannya pada SVG Tunjukkan.

Ringkasan:

Dengan menggunakan fungsi JavaScript, kami boleh mencapai lukisan graf mudah dan kesan visualisasi data yang lebih kompleks. Sama ada anda menggunakan Kanvas untuk melukis grafik asas atau menggunakan perpustakaan Chart.js dan D3.js untuk visualisasi data, fungsi JavaScript ialah alat yang sangat diperlukan. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Carta dan visualisasi data menggunakan fungsi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!