摘要：使用來(lái)呈現(xiàn)圖表。允許用戶(hù)在應(yīng)用程序中創(chuàng)建美觀的可復(fù)用的圖表。它是基于創(chuàng)建的，是一個(gè)以數(shù)據(jù)為中心的圖表庫(kù)，可以改進(jìn)數(shù)據(jù)可視化的效果。非常輕巧，并使用元素來(lái)創(chuàng)建很奇特的圖表。是庫(kù)中較為古老的圖表庫(kù)之一?？偨Y(jié)以上介紹的庫(kù)都是高質(zhì)量的圖表庫(kù)。

當(dāng)前，數(shù)據(jù)可視化已經(jīng)成為數(shù)據(jù)科學(xué)領(lǐng)域非常重要的一部分。不同網(wǎng)絡(luò)系統(tǒng)中產(chǎn)生的數(shù)據(jù)，都需要經(jīng)過(guò)適當(dāng)?shù)目梢暬幚恚员愀玫某尸F(xiàn)給用戶(hù)讀取和分析。

對(duì)任何一個(gè)組織來(lái)說(shuō)，如果能夠充分的獲取數(shù)據(jù)、可視化數(shù)據(jù)和分析數(shù)據(jù)，那么就能很大程度上幫助了解數(shù)據(jù)產(chǎn)生的深層次原因，以便據(jù)此做出正確的決定。

對(duì)于前端開(kāi)發(fā)人員來(lái)說(shuō)，如果能夠掌握交互式網(wǎng)頁(yè)中的數(shù)據(jù)可視化技術(shù)，則是一項(xiàng)很棒的技能。當(dāng)然，通過(guò)一些 JavaScript 的圖表庫(kù)也會(huì)使前端的數(shù)據(jù)可視化變得更加容易。使用這些庫(kù)，開(kāi)發(fā)者可以在無(wú)需考慮不同的語(yǔ)法所帶來(lái)的編程難題的情況下，輕松實(shí)現(xiàn)將數(shù)據(jù)轉(zhuǎn)化為易于理解的圖表。

下面是挑選出的9個(gè) JavaScript 圖表庫(kù)：

Chart.js

Chartist

FlexChart

Echarts

NVD3

C3.js

TauCharts

ReCharts

Flot

Chart.js 是一種簡(jiǎn)潔、用戶(hù)友好的圖表庫(kù)，同時(shí)也是基于 HTML5 的 JavaScript 庫(kù)，用于創(chuàng)建動(dòng)畫(huà)、交互式和可自定義的圖表和圖形。

借助 Chart.js，用戶(hù)可以輕松直觀地查看混合圖表類(lèi)型。默認(rèn)情況下，也可以使用 Chart.js 創(chuàng)建響應(yīng)式網(wǎng)頁(yè)。

Chart.js 庫(kù)允許用戶(hù)快速創(chuàng)建可視化數(shù)據(jù)。Chart.js 易于設(shè)置，對(duì)初學(xué)者十分友好。使用 Chart.js 則不必考慮瀏覽器的兼容性問(wèn)題，因?yàn)?Chart.js 支持舊瀏覽器。

使用 npm 安裝 Chart.js：

npm install chart.js --save

Chart.js 繪制雷達(dá)圖的代碼示例：

const ctx = document.getElementById("myChart");
const options = {
    scale: {
        // Hides the scale
    }
};
const data = {
    labels: ["Running", "Swimming", "Eating", "Cycling"],
    datasets: [
   　　　　　 {
            data: [-10, -5, -3, -15],
            label: "two",
             borderColor: "#ffc63b"
            },
    　　　　　{
            data: [10, 5, 3, 10],
            label: "three",
            borderColor: "#1d9a58"
            },
            {
        data: [18, 10, 4, 2],
        label: "one",
        borderColor: "#d8463c"
    },
]
}

const myRadarChart = new Chart(ctx, {
    data: data,
    type: "radar",
    options: options
});

Chartist 庫(kù)很適合于創(chuàng)建美觀、響應(yīng)能力強(qiáng)、閱讀友好的圖表。Chartist 使用 SVG 來(lái)呈現(xiàn)圖表。

Chartist 還提供了使用 CSS 媒體查詢(xún)和創(chuàng)意動(dòng)畫(huà)來(lái)自定義圖表的能力。用戶(hù)使用 Chartist 在圖表設(shè)計(jì)中實(shí)現(xiàn)自己的所有創(chuàng)意。

Chartist 易于配置，也易于使用 Sass 進(jìn)行定制。但是，它不支持舊瀏覽器。

使用 Chartist，可以通過(guò) CSS 的樣式來(lái)美化你的 SVG，用戶(hù)完全可以現(xiàn)實(shí)自己所想的所有圖表樣式。

使用 npm 安裝 Chartist：

npm install chartist --save

Chartist 創(chuàng)建具有自定義標(biāo)簽的餅圖的代碼示例：

var data = {
  labels: ["Bananas", "Apples", "Grapes"],
  series: [20, 15, 40]
};
var options = {
  labelInterpolationFnc: function(value) {
    return value[0]
  }
};
var responsiveOptions = [
  ["screen and (min-width: 640px)", {
    chartPadding: 30,
    labelOffset: 130,
    labelDirection: "explode",
    labelInterpolationFnc: function(value) {
      return value;
    }
  }],
  ["screen and (min-width: 1024px)", {
    labelOffset: 80,
    chartPadding: 20
  }]
];
new Chartist.Pie(".ct-chart", data, options, responsiveOptions);

FlexChart 是高性能的圖表工具。使用 FlexChart，可輕松的將表格數(shù)據(jù)可視化為業(yè)務(wù)圖表。FlexChart 不但支持常見(jiàn)的圖表類(lèi)型，如折線圖、餅狀圖、面積圖等，還支持氣泡圖、K線圖、條形圖、漏斗圖等高級(jí)圖表類(lèi)型。

FlexChart 的使用也十分簡(jiǎn)單，F(xiàn)lexChart 圖表將所有與數(shù)據(jù)有關(guān)的任務(wù)都委托給 CollectionView 類(lèi)，只需操作 CollectionView 類(lèi)，就能實(shí)現(xiàn)過(guò)濾、排序和分組數(shù)據(jù)等功能。

FlexChart 包含的圖表元素也比較全面，如圖表圖例、圖表標(biāo)題、圖表頁(yè)腳、數(shù)軸、圖表 series 和標(biāo)簽等，用戶(hù)也可以為圖表添加自定義的元素，如平均線和趨勢(shì)線等。

FlexChart 本質(zhì)上是一種交互式的圖表，不論是數(shù)據(jù)進(jìn)行任何的更改，都會(huì)自動(dòng)反應(yīng)在圖表上，如圖表曲線隨數(shù)據(jù)放大縮小、過(guò)濾、鉆取、動(dòng)畫(huà)等。

查看 FlexChart 的中文學(xué)習(xí)指南和旭日?qǐng)DDemo。

FlexChart 繪制柱狀圖的代碼示例：

onload = function() {
  // wrap data in a CollectionView so the grid and chart 
  // get notifications
  var data = new wijmo.collections.CollectionView(getData());
  // create the chart
  var theChart = new wijmo.chart.FlexChart("#theChart", {
      itemsSource: data,
    bindingX: "country",
    series: [
        { binding: "sales", name: "Sales" },
      { binding: "expenses", name: "Expenses" },
      { binding: "downloads", name: "Downloads" }
    ]
  })
  // create a grid to show the data
  var theGrid = new wijmo.grid.FlexGrid("#theGrid", {
      itemsSource: data
  })
  // create some random data
  function getData() {
      var countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
      for (var i = 0; i < countries.length; i++) {
        data.push({
          country: countries[i],
          sales: Math.random() * 10000,
          expenses: Math.random() * 5000,
          downloads: Math.round(Math.random() * 20000),
        });
      }
      return data;
  }
}

Echarts 是網(wǎng)頁(yè)的數(shù)據(jù)可視化方面的一個(gè)非常有用的庫(kù)。使用 Echarts，開(kāi)發(fā)者可以創(chuàng)建直觀的、可自定義的交互式圖表，讓數(shù)據(jù)的展示和分析變得十分容易。

由于 Echarts 是用普通的 JavaScript 編寫(xiě)的，所以 Echarts 不存在其它圖表庫(kù)存在的無(wú)法無(wú)縫遷移的問(wèn)題。

同時(shí)，Echarts 也提供了很多官方文檔供用戶(hù)查看。

使用 npm 可以很容易的完成 Echarts 的安裝：

npm install echarts --save

Echarts 繪制散點(diǎn)圖代碼示例：

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: "Large-scale scatterplot"
    },
    tooltip : {
        trigger: "axis",
        showDelay : 0,
        axisPointer:{
            show: true,
            type : "cross",
            lineStyle: {
                type : "dashed",
                width : 1
            }
        },
        zlevel: 1
    },
    legend: {
        data:["sin","cos"]
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataZoom : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis : [
        {
            type : "value",
            scale:true
        }
    ],
    yAxis : [
        {
            type : "value",
            scale:true
        }
    ],
    series : [
        {
            name:"sin",
            type:"scatter",
            large: true,
            symbolSize: 3,
            data: (function () {
                var d = [];
                var len = 10000;
                var x = 0;
                while (len--) {
                    x = (Math.random() * 10).toFixed(3) - 0;
                    d.push([
                        x,
                        //Math.random() * 10
                        (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                    ]);
                }
                //console.log(d)
                return d;
            })()
        },
        {
            name:"cos",
            type:"scatter",
            large: true,
            symbolSize: 2,
            data: (function () {
                var d = [];
                var len = 20000;
                var x = 0;
                while (len--) {
                    x = (Math.random() * 10).toFixed(3) - 0;
                    d.push([
                        x,
                        //Math.random() * 10
                        (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                    ]);
                }
                //console.log(d)
                return d;
            })()
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

NVD3 是由 Mike Bostock 撰寫(xiě)的基于 D3 的 JavaScript 庫(kù)。NVD3 允許用戶(hù)在 Web 應(yīng)用程序中創(chuàng)建美觀的、可復(fù)用的圖表。

NVD3 具有很強(qiáng)大的圖表功能，能夠很方便的創(chuàng)建箱形圖、旭日形和燭臺(tái)圖等。如果用戶(hù)想在 JavaScript 圖表庫(kù)中用到大量的能力，推薦試用 NVD3

NVD3 圖表庫(kù)的速度有時(shí)可能會(huì)成為一個(gè)問(wèn)題，與 Fastdom 安裝配合使用，速度會(huì)更快。

NVD3 繪制簡(jiǎn)單的折線圖代碼示例：

/*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
  ;

  chart.xAxis     //Chart x-axis settings
      .axisLabel("Time (ms)")
      .tickFormat(d3.format(",r"));

  chart.yAxis     //Chart y-axis settings
      .axisLabel("Voltage (v)")
      .tickFormat(d3.format(".02f"));

  /* Done setting the chart up? Time to render it!*/
  var myData = sinAndCos();   //You need data...

  d3.select("#chart svg")    //Select the 

C3.js

與 TauCharts 相同，C3.js 也是一個(gè)非常有效的基于 D3 的圖表可視化庫(kù)。另外，C3.js 允許用戶(hù)創(chuàng)建可定制的具有個(gè)人風(fēng)格的類(lèi)。

C3.js 看起來(lái)是個(gè)比較難的庫(kù)，但是一旦掌握了 C3.js 技巧，就能得心應(yīng)手的使用了。

有了 C3.js 圖表庫(kù)，即使在第一次渲染之后，用戶(hù)也可以通過(guò)創(chuàng)建回調(diào)來(lái)更新圖表。C3.js 也允許用戶(hù)為自己的 Web 應(yīng)用程序創(chuàng)建可復(fù)用的圖表，從而減少工作量。

使用 npm 安裝 C3.js 圖表庫(kù)：

npm install c3

C3.js 繪制組合圖的代碼示例：

var chart = c3.generate({
    data: {
        columns: [
            ["data1", 30, 20, 50, 40, 60, 50],
            ["data2", 200, 130, 90, 240, 130, 220],
            ["data3", 300, 200, 160, 400, 250, 250],
            ["data4", 200, 130, 90, 240, 130, 220],
            ["data5", 130, 120, 150, 140, 160, 150],
            ["data6", 90, 70, 20, 50, 60, 120],
        ],
        type: "bar",
        types: {
            data3: "spline",
            data4: "line",
            data6: "area",
        },
        groups: [
            ["data1","data2"]
        ]
    }
});

TauCharts

TauCharts 是最靈活的 JavaScript 圖表庫(kù)之一。它是基于 D3 創(chuàng)建的，是一個(gè)以數(shù)據(jù)為中心的 JavaScript 圖表庫(kù)，可以改進(jìn)數(shù)據(jù)可視化的效果。

TauCharts 十分靈活，訪問(wèn)其 API 也十分輕松。TauCharts 為用戶(hù)提供了無(wú)縫映射和可視化的數(shù)據(jù)，使用 TauCharts 能夠設(shè)計(jì)出十分美觀的數(shù)據(jù)界面。同時(shí)，TauCharts 也和易于學(xué)習(xí)。

通過(guò) npm 安裝 TauCharts：

npm install taucharts

TauCharts 繪制水平線的代碼示例：

var defData = [
        {"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {
            "team": "d",
            "cycleTime": 2,
            "effort": 2,
            "count": 5,
            "priority": "low"
        }, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {
            "team": "d",
            "cycleTime": 4,
            "effort": 4,
            "count": 3,
            "priority": "high"
        }, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {
            "team": "l",
            "cycleTime": 3,
            "effort": 2,
            "count": 5,
            "priority": "low"
        }, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {
            "team": "l",
            "cycleTime": 5,
            "effort": 4,
            "count": 3,
            "priority": "high"
        },
        {"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {
            "team": "k",
            "cycleTime": 3,
            "effort": 5,
            "count": 5,
            "priority": "low"
        }, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {
            "team": "k",
            "cycleTime": 5,
            "effort": 8,
            "count": 3,
            "priority": "high"
        }];
var chart = new tauCharts.Chart({
            data: defData,
            type: "horizontalBar",           
            x: "effort",
            y: "team",
            color:"priority"
        });
chart.renderTo("#bar");

ReCharts 是一個(gè)使用 React 構(gòu)建的，基于 D3 的圖表庫(kù)。

使用 ReCharts，用戶(hù)可以在 React Web 應(yīng)用程序中無(wú)縫地編寫(xiě)圖表。

Recharts 非常輕巧，并使用 SVG 元素來(lái)創(chuàng)建很奇特的圖表。

使用 npm 安裝 Recharts：

npm install recharts

Recharts 沒(méi)有冗長(zhǎng)的文檔，它很直接。當(dāng)你遇到困難時(shí)，使用 Recharts 可以很容易找到解決方案。

Recharts 創(chuàng)建自定義內(nèi)容樹(shù)圖的代碼示例：

const {Treemap} = Recharts;

const data = [
          {
            name: "axis",
            children: [
              { name: "Axes", size: 1302 },
              { name: "Axis", size: 24593 },
              { name: "AxisGridLine", size: 652 },
              { name: "AxisLabel", size: 636 },
              { name: "CartesianAxes", size: 6703 },
            ],
          },
          {
            name: "controls",
            children: [
              { name: "AnchorControl", size: 2138 },
              { name: "ClickControl", size: 3824 },
              { name: "Control", size: 1353 },
              { name: "ControlList", size: 4665 },
              { name: "DragControl", size: 2649 },
              { name: "ExpandControl", size: 2832 },
              { name: "HoverControl", size: 4896 },
              { name: "IControl", size: 763 },
              { name: "PanZoomControl", size: 5222 },
              { name: "SelectionControl", size: 7862 },
              { name: "TooltipControl", size: 8435 },
            ],
          },
          {
            name: "data",
            children: [
              { name: "Data", size: 20544 },
              { name: "DataList", size: 19788 },
              { name: "DataSprite", size: 10349 },
              { name: "EdgeSprite", size: 3301 },
              { name: "NodeSprite", size: 19382 },
              {
                name: "render",
                children: [
                  { name: "ArrowType", size: 698 },
                  { name: "EdgeRenderer", size: 5569 },
                  { name: "IRenderer", size: 353 },
                  { name: "ShapeRenderer", size: 2247 },
                ],
              },
              { name: "ScaleBinding", size: 11275 },
              { name: "Tree", size: 7147 },
              { name: "TreeBuilder", size: 9930 },
            ],
          },
              {
                name: "layout",
                children: [
                  { name: "AxisLayout", size: 6725 },
                  { name: "BundledEdgeRouter", size: 3727 },
                  { name: "CircleLayout", size: 9317 },
                  { name: "CirclePackingLayout", size: 12003 },
                  { name: "DendrogramLayout", size: 4853 },
                  { name: "ForceDirectedLayout", size: 8411 },
                  { name: "IcicleTreeLayout", size: 4864 },
                  { name: "IndentedTreeLayout", size: 3174 },
                  { name: "Layout", size: 7881 },
                  { name: "NodeLinkTreeLayout", size: 12870 },
                  { name: "PieLayout", size: 2728 },
                  { name: "RadialTreeLayout", size: 12348 },
                  { name: "RandomLayout", size: 870 },
                  { name: "StackedAreaLayout", size: 9121 },
                  { name: "TreeMapLayout", size: 9191 },
                ],
              },
              { name: "Operator", size: 2490 },
              { name: "OperatorList", size: 5248 },
              { name: "OperatorSequence", size: 4190 },
              { name: "OperatorSwitch", size: 2581 },
              { name: "SortOperator", size: 2023 },
            ],
          }
        ];
const COLORS = ["#8889DD", "#9597E4", "#8DC77B", "#A5D297", "#E2CF45", "#F8C12D"];
const CustomizedContent = React.createClass({
  render() {
    const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
    return (
      
        
        {
          depth === 1 ?
          
            {name}
          
          : null
        }
        {
          depth === 1 ?
          
            {index + 1}
          
          : null
        }
      
    );
  }
});

const SimpleTreemap = React.createClass({
    render () {
      return (
        }
      />
    );
  }
})

ReactDOM.render(
  ,
  document.getElementById("container")
);
 

目前，jQuery 已經(jīng)成為 Web 開(kāi)發(fā)人員非常重要的工具。有了 Flot.js，前端設(shè)計(jì)也變得更加容易。

Flot.js 是 JavaScript 庫(kù)中較為古老的圖表庫(kù)之一。盡管如此，F(xiàn)lot.js 也不會(huì)因?yàn)槔L制折線圖、餅圖、條形圖、面積圖、甚至堆疊圖表而降低其性能。

Flot.js 有一個(gè)很完善的文檔。當(dāng)用戶(hù)遇到困難時(shí)，可以很容易地找到解決辦法。Flot.js 也支持舊版本的瀏覽器。

可以選擇不使用 npm 來(lái)安裝 Flot.js，而是在 HTML5 中包含 jQuery 和 JavaScript 文件。

Flot.js 的基本用法代碼示例：

$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

SpreadJS 純前端表格控件是基于 HTML5 的 JavaScript 電子表格和網(wǎng)格功能控件，提供了完備的公式引擎、排序、過(guò)濾、輸入控件、數(shù)據(jù)可視化、Excel 導(dǎo)入/導(dǎo)出等功能，適用于 .NET、Java 和移動(dòng)端等各平臺(tái)在線編輯類(lèi) Excel 功能的表格程序開(kāi)發(fā)。

以上介紹的 JavaScript 庫(kù)都是高質(zhì)量的圖表庫(kù)。但是在學(xué)習(xí)這些庫(kù)的過(guò)程中，可能會(huì)因?yàn)閷W(xué)習(xí)曲線陡峭或是缺乏學(xué)習(xí)資料而遇到困難，一種很好的方案是將這些庫(kù)結(jié)合起來(lái)使用。最后也歡迎大家補(bǔ)充更多的 JavaScript 圖表庫(kù)。

參考文章：https://dzone.com/articles/to...

轉(zhuǎn)載請(qǐng)注明出自：葡萄城控件

葡萄城成立于1980年，是全球最大的控件提供商，世界領(lǐng)先的企業(yè)應(yīng)用定制工具、企業(yè)報(bào)表和商業(yè)智能解決方案提供商，為超過(guò)75%的全球財(cái)富500強(qiáng)企業(yè)提供服務(wù)。葡萄城于1988年在中國(guó)設(shè)立研發(fā)中心，在全球化產(chǎn)品的研發(fā)過(guò)程中，不斷適應(yīng)中國(guó)市場(chǎng)的本地需求，并為軟件企業(yè)和各行業(yè)的信息化提供優(yōu)秀的軟件工具和咨詢(xún)服務(wù)。