Membuat arahan carta menggunakan AngularJS dan D3.js

mata teras

d3.js adalah perpustakaan JavaScript yang boleh digunakan bersempena dengan AngularJS untuk membuat carta masa nyata interaktif dengan SVG (grafik vektor berskala). Gabungan ini membolehkan pemaju membuat aplikasi web yang kaya dengan visualisasi data dinamik.
AngularJS dan D3.js boleh ditetapkan dalam halaman HTML untuk membuat arahan carta. Ini termasuk membuat pengawal dan arahan AngularJS dan menggunakan pengawal untuk menyimpan data yang akan ditarik dalam carta. Kemudian, anda boleh menggunakan arahan ini untuk melukis carta garis menggunakan D3.JS.
Klik boleh dikemas kini secara real time untuk mencerminkan perubahan dalam data asas. Ini boleh dilakukan dengan menggunakan pemerhati koleksi dalam arahan untuk memantau perubahan dalam data pengumpulan dan kemudian menyusun semula carta apabila perubahan dikesan.
d3.js boleh digunakan dengan versi lain Angular dan lain -lain kerangka JavaScript. Ia menyediakan sistem pengikat data yang kuat yang boleh digunakan untuk memproses kemas kini data, sementara AngularJS menyediakan kaedah berstruktur untuk membina aplikasi dan mengendalikan kemas kini data.

D3 adalah perpustakaan JavaScript yang boleh digunakan untuk membuat carta interaktif menggunakan grafik vektor berskala teknologi HTML5 (SVG). Mewujudkan carta secara langsung dengan SVG boleh menyakitkan kerana anda perlu mengingati bentuk yang disokong oleh SVG dan memanggil API beberapa kali untuk membuat carta dinamik. D3 menghapuskan kebanyakan kesakitan dan menyediakan antara muka yang mudah untuk membina carta berasaskan SVG. Jay Raj telah menerbitkan dua artikel SitePoint yang baik menggunakan D3.

Kebanyakan anda mungkin tidak perlu memperkenalkan angularjs secara rasmi. AngularJS adalah rangka kerja JavaScript pihak pelanggan untuk membina aplikasi web yang kaya. Salah satu kelebihan utama AngularJS adalah sokongannya untuk arahan. Arahan menyediakan cara terbaik untuk menentukan atribut dan elemen HTML kita sendiri. Ia juga membantu memisahkan tag dan kod antara satu sama lain.

AngularJS juga sangat kuat dalam mengikat data. Ciri ini menjimatkan banyak masa dan usaha yang diperlukan untuk mengemas kini UI berdasarkan data dalam model. Di dunia dalam talian moden, pelanggan meminta pemaju untuk membina laman web responsif masa nyata. Ini bermakna pelanggan ingin sentiasa melihat data terkini di skrin. Sebaik sahaja seseorang telah mengubahsuai data pada backend, UI data mesti dikemas kini. Sekiranya kita tidak mempunyai sokongan untuk mengikat data, melakukan kemas kini masa nyata akan menjadi sangat sukar dan tidak cekap.

Dalam artikel ini, kita akan belajar bagaimana untuk membina arahan AngularJS masa nyata yang membungkus carta D3.

Tetapan Alam Sekitar

Pertama, kita perlu menubuhkan persekitaran. Kita perlu memasukkan AngularJS dan D3 dalam halaman HTML. Oleh kerana kita hanya membina satu arahan carta, kita perlu membuat pengawal AngularJS dan satu arahan. Dalam pengawal, kami memerlukan koleksi yang memegang data yang akan diplot dalam carta. Coretan kod berikut menunjukkan pengawal dan arahan awal. Kami akan menambah lebih banyak kod ke komponen ini kemudian.

<code class="language-javascript">var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height="200" width="850"></svg>",
    link: function(scope, elem, attrs){
    }
  };
});</code>

kami akan mengisi fungsi pautan dalam arahan di atas untuk menggunakan data yang disimpan dalam pengawal dan lukis carta garis menggunakan D3. Templat arahan mengandungi elemen SVG. Kami akan memohon API D3 untuk elemen ini untuk menarik carta. Coretan kod berikut menunjukkan penggunaan contoh arahan:

<code class="language-html"><div linear-chart chart-data="salesData"></div></code>

Sekarang, mari kita kumpulkan data asas yang kita perlukan untuk menarik carta. Ia termasuk data yang akan ditarik, objek JavaScript elemen SVG, dan data statik lain.

<code class="language-javascript">var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);</code>

Selepas memuatkan perpustakaan D3, objek D3 akan tersedia sebagai pemboleh ubah global. Walau bagaimanapun, jika kita menggunakannya secara langsung dalam blok kod, sukar untuk menguji blok kod itu. Untuk membuat arahan yang boleh diuji, saya menggunakan objek dengan $window.

Lukis carta baris mudah

mari kita tetapkan parameter yang diperlukan untuk menarik carta. Carta memerlukan paksi X, paksi Y, dan medan data yang mewakili paksi ini. Dalam contoh ini, paksi-x mewakili masa jam. Kita boleh mengambil nilai pertama dan terakhir dalam array. Pada paksi-y, nilai yang mungkin terdiri daripada sifar hingga maksimum jualan. Jualan maksimum boleh didapati menggunakan d3.max(). Julat paksi berbeza -beza mengikut ketinggian dan lebar elemen SVG.

Menggunakan nilai di atas, kita perlu mempunyai D3 melukis paksi dengan arah yang dikehendaki dan bilangan skala. Akhirnya, kita perlu menentukan fungsi menggunakan d3.svg.line() untuk melukis garis berdasarkan skala yang kami tentukan di atas. Semua komponen di atas mesti dilampirkan pada elemen SVG dalam templat arahan. Kita boleh menggunakan gaya dan transformasi ke carta apabila melampirkan item. Kod berikut menetapkan parameter dan memasukkannya ke SVG:

<code class="language-javascript">function setChartParameters(){
  xScale = d3.scale.linear()
             .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length - 1].hour])
             .range([padding + 5, rawSvg.clientWidth - padding]);

              yScale = d3.scale.linear()
                .domain([0, d3.max(salesDataToPlot, function (d) {
                  return d.sales;
                })])
             .range([rawSvg.clientHeight - padding, 0]);

  xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

  yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

  lineFun = d3.svg.line()
              .x(function (d) {
                return xScale(d.hour);
              })
              .y(function (d) {
                return yScale(d.sales);
              })
              .interpolate("basis");
}

function drawLineChart() {

  setChartParameters();

  svg.append("svg:g")
     .attr("class", "x axis")
     .attr("transform", "translate(0,180)")
     .call(xAxisGen);

   svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,0)")
      .call(yAxisGen);

   svg.append("svg:path")
      .attr({
        d: lineFun(salesDataToPlot),
        "stroke": "blue",
        "stroke-width": 2,
        "fill": "none",
        "class": pathClass
   });
}

drawLineChart();</code>

kemas kini masa nyata carta

Seperti yang disebutkan sebelumnya, dengan keupayaan rangkaian hari ini, pengguna kami ingin melihat kemas kini carta data dengan segera apabila data yang mendasari berubah. Perubahan boleh ditolak kepada pelanggan menggunakan teknologi seperti WebSocket. Arahan carta yang kami buat hanya dapat bertindak balas terhadap perubahan ini dan mengemas kini carta.

Untuk menolak data melalui WebSocket, kami memerlukan komponen pelayan yang dibina menggunakan socket.io dan node.js, signalR dan .net atau platform lain. Dalam demo ini, saya menggunakan perkhidmatan AngularJS $interval untuk menolak sepuluh nilai jualan rawak ke dalam pelbagai jualan dengan kelewatan satu saat:

<code class="language-javascript">$interval(function() {
  var hour = $scope.salesData.length + 1;
  var sales = Math.round(Math.random() * 100);

  $scope.salesData.push({hour: hour, sales: sales});
}, 1000, 10);</code>

Untuk mengemas kini carta sebaik sahaja data baru ditolak, kita perlu menarik semula carta menggunakan data yang dikemas kini. Pemerhati koleksi mesti digunakan dalam Arahan untuk memantau perubahan pada data pengumpulan. Apabila sebarang perubahan dibuat ke koleksi, pemerhati dipanggil. Carta ditarik semula dalam pemerhati.

<code class="language-javascript">scope.$watchCollection(exp, function(newVal, oldVal) {
  salesDataToPlot = newVal;
  redrawLineChart();
});

function redrawLineChart() {

  setChartParameters();
  svg.selectAll("g.y.axis").call(yAxisGen);
  svg.selectAll("g.x.axis").call(xAxisGen);

  svg.selectAll("." + pathClass)
     .attr({
       d: lineFun(salesDataToPlot)
     });
}</code>

Kesimpulan

AngularJS dan D3 adalah perpustakaan yang sangat berguna untuk membina aplikasi perniagaan yang kaya di web. Kami membincangkan cara menggunakannya bersama -sama untuk membuat carta mudah. Anda boleh memperluaskan pengetahuan ini untuk membuat carta untuk permohonan anda.

(disebabkan oleh batasan ruang, bahagian FAQ ditinggalkan di sini. Kandungan bahagian FAQS selaras dengan teks asal dan tidak memerlukan penulisan semula.)

Atas ialah kandungan terperinci Membuat arahan carta menggunakan AngularJS dan D3.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!