幾款實用的 JavaScript 圖形圖表庫

edithfang發表於2015-01-09
JavaScript
眾多周知，圖形和圖表要比文字更具表現力和說服力。這裡給大家精心推薦幾款實用的 JavaScript 圖形圖表庫，可以幫助你實現各種功能的圖表。

Flotr2



Humble software 團隊在視覺化圖形應用程式方面已經有相當長的一段時間了，他們的 Flotr2 庫是最流行的圖形圖表庫之一，因為它提供了大量的預製的範例，對於初學者來說容易安裝和理解。

你也可以通過新增自己的圖形型別來擴充套件這個庫，甚至開發你自己的外掛把它帶到一個新的水平。現在，它是專為 HTML5 Canvas 構建，能夠和移動裝置的無縫整合。它支援 IE6+ 和所有的現代瀏覽器 。示例程式碼：

(functionbasic(container) {
  
  var
    d1 = [[0, 3], [4, 8], [8, 5], [9, 13]],// First data series
    d2 = [],                               // Second data series
    i, graph;
  
  // Generate first data set
  for(i = 0; i < 14; i += 0.5) {
    d2.push([i, Math.sin(i)]);
  }
  
  // Draw Graph
  graph = Flotr.draw(container, [ d1, d2 ], {
    xaxis: {
      minorTickFreq: 4
    },
    grid: {
      minorVerticalLines:true
    }
  });
})(document.getElementById("editor-render-0"));

外掛下載      線上演示


Springy



Springy 是一個有向圖佈局演算法。這意味著，Springy 使用了一些真實世界的物理特性，試圖找出如何表現出網路圖的方式，看起來不錯。它有一個相當容易使用的 API ，可以通過原始碼來感受一下。您還可以看看更先進的線上演示，用於連線形狀。

示例程式碼：

// make a new graph
vargraph =newSpringy.Graph();
  
// make some nodes
varspruce = graph.newNode({label:'Norway Spruce'});
varfir = graph.newNode({label:'Sicilian Fir'});
  
// connect them with an edge
graph.newEdge(spruce, fir);

外掛下載      線上演示

xCharts



xCharts 是一個基於 D3，用於構建精美，自定義資料驅動的 JavaScript 視覺化圖表外掛，通過結合 HTML，CSS 和 SVG 的優勢使得圖表的建立和整合難以置信的方便和有趣。

有了這個庫，你可以在幾分鐘內構建資料驅動的資料圖表。柱狀圖示例程式碼：

vardata = {
  "xScale":"ordinal",
  "yScale":"linear",
  "main": [
    {
      "className":".pizza",
      "data": [
        {
          "x":"Pepperoni",
          "y": 4
        },
        {
          "x":"Cheese",
          "y": 8
        }
      ]
    },
    {
      "className":".pizza",
      "data": [
        {
          "x":"Pepperoni",
          "y": 6
        },
        {
          "x":"Cheese",
          "y": 5
        }
      ]
    }
  ]
};
varmyChart =newxChart('bar', data,'#example2');

外掛下載      線上演示

Rickshaw



Rickshaw 是一個用於建立互動式時間序列圖的 JavaScript 工具包，是另外一個基於 D3 的成功作品，試圖使建立圖形成為一件輕而易舉的事情。你可以很容易地從框架的底層操縱 D3，甚至SVG。

我最的喜歡的是這個多重渲染演示，建議看下該頁面的原始碼，看看這一切是如何結合在一起的。示例程式碼：

<!doctype html>
<script src="/vendor/d3.min.js"></script>
<script src="/vendor/d3.layout.min.js"></script>
<script src="/rickshaw.min.js"></script>
  
<div id="chart"></div>
  
<script>
  
vargraph =newRickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 300,
    height: 200,
    series: [{
        color:'steelblue',
        data: [
            { x: 0, y: 40 },
            { x: 1, y: 49 },
            { x: 2, y: 38 },
            { x: 3, y: 30 },
            { x: 4, y: 32 } ]
    }]
});
  
graph.render();
  
</script>

外掛下載      線上演示

Ico



ICO 是使用 Raphael 繪製圖形的 JavaScript 庫，這意味著它可以在多個瀏覽器（包括IE）中繪製圖形。你可以使用 ICO 建立各種型別的圖表。

Raphael 是一個用於在網頁中繪製向量圖形的 Javascript 庫。它使用 SVG W3C 推薦標準和 VML 作為建立圖形的基礎，你可以通過 JavaScript 操作 DOM 來輕鬆建立出各種複雜的柱狀圖、餅圖、曲線圖等各種圖表，還可以繪製任意形狀的圖形，可以進行圖表或影像的裁剪和旋轉等複雜操作。

示例程式碼：

newIco.LineGraph($('#linegraph'), {
    one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
    two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
    three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
  }, {
    markers:'circle',
    colours: { one:'#990000', two:'#009900', three:'#000099'},
    labels: ['one','two','three','four',
             'five','six','seven','eight','nine'],
    meanline:true,
    grid:true
  }
);

外掛下載      線上演示

Flot



Flot 是最流行的 jQuery 圖表庫之一，其特點是簡單的用法，有吸引力的外觀和互動功能。使用非常簡單，支援放大縮小以及滑鼠追蹤等互動功能。目前支援的圖表型別有折線圖、圓餅圖、直條圖、分割槽圖、堆疊圖等，也支援實時更新圖表及 Ajax 更新圖表。示例程式碼：

$(function() {
  
  vard1 = [];
  for(vari = 0; i < 14; i += 0.5) {
    d1.push([i, Math.sin(i)]);
  }
  vard2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  // A null signifies separate line segments
  vard3 = [[0, 12], [7, 12],null, [7, 2.5], [12, 2.5]];
  $.plot("#placeholder", [d1, d2, d3]);
  
  // Add the Flot version string to the footer
  $("#footer").prepend("Flot "+ $.plot.version +" – ");
   
});


外掛下載      線上演示  

英文連結：6 JS Libraries for Visualized Charts & Graphs
來自：http://www.admin10000.com/document/4402.html
JAVASCRIPT 圖形圖表
評論(1)

相關文章