Mengintegrasikan CanvasJS dengan DataTables

CanvasJS ialah perpustakaan carta JavaScript yang membolehkan anda membuat carta interaktif dan responsif, manakala DataTables ialah pemalam jQuery yang mempertingkatkan jadual HTML dengan kawalan interaksi lanjutan seperti penomboran, penapisan dan pengisihan. Menggabungkan kedua-dua alatan ini dalam papan pemuka membolehkan visualisasi data masa nyata, menjadikannya lebih mudah untuk menganalisis dan mentafsir arah aliran dan corak data melalui carta interaktif dan menarik secara visual yang dikemas kini secara dinamik berdasarkan data jadual.

Dalam tutorial ini, kami akan melalui proses penyepaduan CanvasJS dengan DataTables untuk mencipta carta pai dinamik yang mengemas kini berdasarkan data dalam jadual. Contoh ini akan menggunakan struktur HTML mudah dan kod JavaScript untuk menunjukkan penyepaduan.

Prasyarat

Sebelum kami bermula, pastikan anda mempunyai perkara berikut:

• Pengetahuan asas HTML, CSS dan JavaScript.
• Pustaka CanvasJS dan DataTables disertakan dalam projek anda.

Langkah 1: Menyediakan HTML

Mula-mula, buat fail HTML dengan bekas untuk carta dan jadual untuk data.

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <!-- Add more rows as needed -->
  </tbody>
</table>

Langkah 2: Mencipta Fail JavaScript

Buat fail script.js dan tambah kod berikut untuk memulakan carta DataTable dan CanvasJS.

// Create DataTable
var table = new DataTable('#dataTable');

// Create chart
var chart = new CanvasJS.Chart('chartContainer', {
        animationEnabled: true,
    theme: "light2",
    title: {
        text: 'Staff Count Per Position'
    },
    data: [
        {
            type: "pie",
          dataPoints: chartData(table)
        }
    ]
});
chart.render();

// On each draw, update the data in the chart
table.on('draw', function () {
    chart.options.data[0].dataPoints = chartData(table);
    chart.render();
});

function chartData(table) {
    var counts = {};

    // Count the number of entries for each position
    table
        .column(1, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });

    return Object.entries(counts).map((e) => ({
        label: e[0],
        y: e[1]
    }));
}

• Struktur HTML: Fail HTML termasuk bekas untuk carta (cartaContainer) dan jadual (contoh) dengan data sampel.
• Permulaan Jadual Data: Jadual Data dimulakan menggunakan pembina Jadual Data.
• Permulaan Carta CanvasJS: Carta CanvasJS baharu dibuat dengan pilihan yang ditentukan, termasuk jenis carta (pai) dan titik data.
• Kemas Kini Data Dinamik: Acara cabutan Jadual Data digunakan untuk mengemas kini titik data carta apabila jadual dilukis semula. Fungsi chartData mengira bilangan entri untuk setiap kedudukan dan mengemas kini carta dengan sewajarnya.

Langkah 3: Uji dan Nyahpepijat

• Buka fail HTML dalam pelayar web: Pastikan carta dan jadual dipaparkan dengan betul.
• Semak ralat: Buka konsol pembangun penyemak imbas untuk menyemak sebarang ralat JavaScript.
• Sahkan kemas kini dinamik: Tambah atau alih keluar baris daripada jadual dan pastikan carta dikemas kini dengan sewajarnya.

jsfiddle.net

Dengan mengikut langkah ini, anda telah berjaya menyepadukan CanvasJS dengan DataTables untuk mencipta carta pai dinamik yang dikemas kini berdasarkan data dalam jadual. Penyepaduan ini membolehkan anda menggambarkan data dalam masa nyata, menjadikannya lebih mudah untuk menganalisis dan memahami maklumat yang dibentangkan dalam Jadual Data. Jangan ragu untuk menyesuaikan carta dan jadual mengikut keperluan untuk kes penggunaan khusus anda. Selamat mengekod!

Atas ialah kandungan terperinci Mengintegrasikan CanvasJS dengan DataTables. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!