使用AngularJS和D3.JS創建圖表指令

核心要點

• D3.js是一個JavaScript庫，可與AngularJS結合使用，利用SVG（可縮放矢量圖形）創建交互式實時圖表。這種組合允許開發人員創建具有動態數據可視化的豐富Web應用程序。
• AngularJS和D3.js可以在HTML頁面中設置，以創建圖表指令。這包括創建AngularJS控制器和指令，並使用控制器保存要在圖表中繪製的數據。然後，可以使用該指令使用D3.js繪製折線圖。
• 可以實時更新圖表以反映底層數據的變化。這可以通過在指令中使用集合觀察器來監視集合數據的變化，然後在檢測到變化時重新繪製圖表來實現。
• D3.js可與其他版本的Angular和其他JavaScript框架一起使用。它提供了一個強大的數據綁定係統，可用於處理數據更新，而AngularJS提供了一種構建應用程序和處理數據更新的結構化方法。

D3是一個JavaScript庫，可用於使用HTML5技術可縮放矢量圖形(SVG)創建交互式圖表。直接使用SVG創建圖表可能會很痛苦，因為需要記住SVG支持的形狀，並多次調用API才能使圖表動態化。 D3消除了大部分痛苦，並提供了一個簡單的界面來構建基於SVG的圖表。 Jay Raj在使用D3方面發表了兩篇不錯的SitePoint文章，如果您還不熟悉D3，可以查看一下。

你們中的大多數人可能不需要對AngularJS進行正式介紹。 AngularJS是一個用於構建豐富Web應用程序的客戶端JavaScript框架。 AngularJS最主要的優點之一是對指令的支持。指令提供了一種極好的方法來定義我們自己的HTML屬性和元素。它還有助於將標記和代碼彼此分開。

AngularJS在數據綁定方面也非常強大。此功能節省了根據模型中的數據更新UI所需的大量時間和精力。在現代網絡世界中，客戶要求開發人員構建實時響應的網站。這意味著客戶希望始終在屏幕上看到最新的數據。一旦有人修改了後端的數據，就必須更新數據UI。如果我們沒有數據綁定的支持，執行此類實時更新將非常困難且效率低下。

在本文中，我們將了解如何構建包裝D3圖表的實時AngularJS指令。

環境設置

首先，我們需要設置環境。我們需要在HTML頁面中包含AngularJS和D3。因為我們只構建一個圖表指令，所以我們需要創建一個AngularJS控制器和一個指令。在控制器中，我們需要一個保存要在圖表中繪製數據的集合。以下代碼片段顯示了初始控制器和指令。稍後我們將向這些組件添加更多代碼。

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

我們將填充上述指令中的link函數，以使用控制器中存儲的數據並使用D3繪製折線圖。指令的模板包含一個svg元素。我們將對這個元素應用D3的API來繪製圖表。以下代碼片段顯示了指令的一個示例用法：

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

現在，讓我們收集繪製圖表所需的基本數據。它包括要繪製的數據、SVG元素的JavaScript對象和其他靜態數據。

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

加載d3庫後，d3對象將作為全局變量可用。但是，如果我們直接在代碼塊中使用它，則很難測試該代碼塊。為了使指令可測試，我通過$window使用該對象。

繪製簡單的折線圖

讓我們設置繪製圖表所需的參數。圖表需要一個x軸、一個y軸以及表示這些軸的數據域。在這個例子中，x軸表示小時的時間。我們可以取數組中的第一個和最後一個值。在y軸上，可能的值從零到銷售額的最大值。可以使用d3.max()找到最大銷售額。軸的範圍根據svg元素的高度和寬度而變化。

使用上述值，我們需要讓d3繪製具有所需方向和刻度數的軸。最後，我們需要使用d3.svg.line()定義一個函數，該函數根據我們上面定義的比例繪製線條。所有上述組件都必須附加到指令模板中的svg元素。我們在附加項目時可以將樣式和轉換應用於圖表。以下代碼設置參數並附加到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>

實時更新圖表

如前所述，憑藉當今網絡的能力，我們的用戶希望在底層數據發生變化時立即看到數據圖表更新。可以使用WebSocket等技術將更改的信息推送到客戶端。我們剛剛創建的圖表指令應該能夠響應這些更改並更新圖表。

為了通過WebSocket推送數據，我們需要使用Socket.IO與Node.js、SignalR與.NET或其他平台上的類似技術構建的服務器組件。在本演示中，我使用AngularJS的$interval服務以一秒的延遲將十個隨機的銷售值推入銷售數組：

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

為了在新數據被推送後立即更新圖表，我們需要使用更新後的數據重新繪製圖表。必須在指令中使用集合觀察器來監視集合數據的更改。當對集合進行任何更改時，都會調用觀察器。圖表在觀察器中重新繪製。

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

結論

AngularJS和D3是用於在Web上構建豐富的業務應用程序的非常有用的庫。我們討論瞭如何將它們一起使用來創建一個簡單的圖表。您可以擴展此知識來創建應用程序的圖表。

(由於篇幅限制，此處省略了FAQs部分。 FAQs部分內容與原文一致，無需改寫。)

以上是使用AngularJS和D3.JS創建圖表指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！