14款基于Javascript的数据可视化工具,14款基于javascript的数量可视化工具

14款基于javascript的数码可视化工具

2015/12/15 · JavaScript
·
数量可视化

原稿出处: 百度EFE-
Ceada   

俗话说,一图胜千言。图形化的新闻方可令人们对数码有更进一步直观清晰的精晓,让音讯公布者越发便捷地出示自己的焦点内容。在前端开发中,若是不够适当工具,制作数据可视化图表会相当复杂。然则随着数据可视化概念渐渐火热,有较多优质的图形开源库和打造工具脱颖而出。下边,大家就拿里面相比较有名的
14个产品举行简易介绍。

编译地址:Are you ready for the era of big data? 14 popular
JavaScript based data visualization
tools
原文地址:http://efe.baidu.com/blog/14-popular-data-visualization-tools/


脚下,数据可视化已经成为多少正确领域极度关键的一部分。分裂网络种类中发生的数据,都必要通过适当的可视化处理,以便更好的表现给用户读取和分析。

AnyChart

链接:

AnyChart 是依照 Flash/JavaScript(HTML5)
的图形解决方案,它可以轻松地跨浏览器、跨平台工作。除了基础的图片成效外,它还有收费的交互式图表和仪表成效。它可以由此XML
格式获取数据,该方法让开发人士万分灵活地操纵图表上的每一个数据点,而当图表数据点数量偏大时,则足以行使
CSV 数据输入,减小数据文件大小和图纸加载时间。

俗话说,一图胜千言。图形化的信息可以让芸芸众生对数码有尤其直观清晰的知情,让音讯揭橥者尤其神速地出示自己的大旨内容。在前端开发中,假诺紧缺适当工具,制作数据可视化图表会非常复杂。然则随着数据可视化概念渐渐火热,有较多美丽的图纸开源库和打造工具脱颖而出。上边,大家就拿里面比较显赫的
14个产品举办简短介绍。

小说转自极分享14款基于Javascript的数据可视化工具,14款基于javascript的数量可视化工具。     更加多美丽内容移动原文


俗话说,一图胜千言。图形化的音讯能够让大千世界对数码有越来越直观清晰的领会,让音讯发表者越发高效地出示自己的焦点内容。在前端开发中,若是缺失适当工具,制作数据可视化图表会非凡复杂。然则随着数据可视化概念逐渐火热,有较多美观的图样开源库和打造工具脱颖而出。下边,大家就拿里面相比较有名的
14个产品进行简要介绍。

AnyChart

亚洲必赢官网 1

链接:http://www.anychart.com/

AnyChart 是基于 Flash/JavaScript(HTML5)
的图片解决方案,它可以轻松地跨浏览器、跨平台工作。除了基础的图形效用外,它还有收费的交互式图表和仪表效用。它可以透过
XML
格式获取数据,该措施让开发人士非常灵活地决定图表上的每一个数据点,而当图表数据点数量偏大时,则可以运用
CSV 数据输入,减小数据文件大小和图片加载时间。

amCharts

亚洲必赢官网 2

链接:http://www.amcharts.com/

amCharts 是一款高档图表库,致力于对 Web
上的数据可视化提供支撑。它所支撑的图纸包罗柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、焚烧图和金字塔图等等。amCharts
库是一款完全独立的类库,在利用中不借助任何其余第三方类库,就可一直编译运行。除了提供最中央的正规化要素外,amCharts
还提供了交互特性。用户在浏览基于 amCharts 制作的图样时,用鼠标 hover
图表内容,可以与其开展互动,使图表显示细节消息,其中表现新闻的器皿被誉为
Balloon(气球)。除此之外图表可以动态动画的花样被绘制出来,带来了了相当好的来得效果。

Cesium

亚洲必赢官网 3

链接:http://cesiumjs.org/

Cesium 同样令人瞩目于地理数据可视化,它是一个 Javascript 库,可以在 Web
浏览器中绘制 3D/2D 地球。无需任何插件即可按照 WebGL
来进展硬件加快。除此之外,它还有跨平台、跨浏览器的性状。Cesium 本身基于
Apache 开源协议,匡助商业及非商业项目。

Chart.js

亚洲必赢官网 4

链接:http://www.chartjs.org/

Chart.js
是一个简便、面向对象,为安插和开发者准备的图纸绘制工具库。它提供了六种基础图表类型。基于
Html5,响应式,协助具有现代浏览器。同时它不看重任何外部工具库,本身轻量级,且援救模块化,即开发者可以拆分
Chart.js
仅引入自己索要的一些进入工程。在精巧的体形中它同时协理可相互图表。

对其余一个团伙来说,若是可以尽量的获取数据、可视化数据和剖析数据,那么就能很大程度上支持了然多少发生的深层次原因,以便据此做出科学的操纵。

amCharts

链接:

amCharts 是一款高档图表库,致力于对 Web
上的数额可视化提供支撑。它所支撑的图纸包含柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、焚烧图和金字塔图等等。amCharts
库是一款完全独立的类库,在动用中不借助任何别的第三方类库,就可直接编译运行。除了提供最宗旨的专业要素外,amCharts
还提供了相互特性。用户在浏览基于 amCharts 制作的图片时,用鼠标 hover
图表内容,可以与其开展互相,使图表显示细节音讯,其中表现新闻的器皿被称呼
Balloon(气球)。除此之外图表可以动态动画的款型被绘制出来,带来了了相当好的来得效果。

AnyChart

对于前端开发人士来说,假诺可以支配交互式网页中的数据可视化技术,则是一项很棒的技巧。当然,通过一些
JavaScript
的图表库也会使前端的数额可视化变得尤其不难。使用那一个库,开发者可以在无需考虑不相同的语法所带动的编程难点的景观下,轻松落成将数据转载为便于领会的图纸。

Cesium

链接:

Cesium 同样令人瞩目于地理数据可视化,它是一个 Javascript 库,可以在 Web
浏览器中绘制 3D/2D 地球。无需任何插件即可根据 WebGL
来进展硬件加速。除此之外,它还有跨平台、跨浏览器的特点。Cesium 本身基于
Apache 开源协议,接济商业及非商业项目。

AnyChart

上边是挑选出的
9 个 JavaScript 图表库:

Chart.js

链接:

Chart.js
是一个简约、面向对象,为规划和开发者准备的图样绘制工具库。它提供了六种基础图表类型。基于
Html5,响应式,支持具有现代浏览器。同时它不依靠任何外部工具库,本身轻量级,且帮衬模块化,即开发者能够拆分
Chart.js
仅引入自己需求的有的进入工程。在精细的体态中它同时匡助可互相图表。

链接:http://www.anychart.com/

  • Chart.js
  • Chartist
  • FlexChart
  • Echarts
  • 亚洲必赢官网,NVD3
  • C3.js
  • TauCharts
  • ReCharts
  • Flot 

Chartist.js

链接:

Chartist.js 是一个非凡简单而且实用的 JavaScript 图表生成工具,它协理 SVG
格式,图表数据转换灵活,同时也支撑多种图片突显格局。在工程中,Chartist.js
的 CSS 和 JavaScript
分离,由此代码相比较短小,在行使时布署流程万分简练。它生成的是响应式图表,可以自行接济差距的浏览器尺寸和分辨率,越多的是,它也协助自定义
SASS 架构。

AnyChart 是按照 Flash/JavaScript(HTML5)
的图纸解决方案,它可以轻松地跨浏览器、跨平台工作。除了基础的图样成效外,它还有收费的交互式图表和仪表成效。它可以由此XML
格式获取数据,该格局让开发人士非凡灵活地操纵图表上的每一个数据点,而当图表数据点数量偏大时,则足以行使
CSV 数据输入,减小数据文件大小和图表加载时间。

 

D3

链接:

二〇一一年,Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发表了 D3,它是当前
Web 端评价最高的 Javascript 可视化工具库。D3
可以向用户提供多量线性图和条形图之外的复杂图表样式,例如 Voronoi
图、树形图、圆形集群和单词云等等。它的优点是实例充足,易于落到实处调试数据同时可以通过扩展完毕任何想到的数量可视化效果,缺点是读书窍门比较高。与
jQuery 类似,D3 直接对 DOM
举行操作,那是它与其余可视化工具的重点不同所在:它会设置独立的目的以及作用集,并通过规范
API 进行 DOM 调用。

amCharts

Chart.js

亚洲必赢官网 5

Chart.js
是一种精简、用户自己的图表库,同时也是基于 HTML5 的 JavaScript
库,用于创设动画、交互式和可自定义的图纸和图片。

依靠
Chart.js,用户可以轻松直观地翻看混合图表类型。默许景况下,也足以运用
Chart.js 创立响应式网页。

Chart.js
库允许用户急忙创设可视化数据。Chart.js 易于设置,对初学者极度和谐。使用
Chart.js 则无需考虑浏览器的包容性难点,因为 Chart.js
协理旧浏览器。

使用 npm
安装 Chart.js:

npm
install chart.js –save 

Chart.js
绘制雷达图的代码示例: 

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
});

 

echarts

链接:

一款免费开源的多寡可视化产品,给用户提供直观、生动、可相互和可个性化定制的数据可视化图表。Echarts
上手简单。其负有的拖拽重统计、数据视图、值域漫游等特色大大增强了用户体验,协理用户在对数码挖掘、整合时大幅升高成效。同时,Echarts
提供了增进的图片类型,除了普遍的折柱饼,还协理地图、力导向图、treemap、热力图、树图等等。更惊艳的是,它还匡助任意维度的堆积和多图表混合表现。简单来说,那是一款让大家足够惊喜的可视化产品,非常强劲,可是他图表不是很美妙,对活动端的接济也还有些欠缺,然则那么些题材在合法最新布告的3.0beta中获取了很大改进

amCharts

Chartist

 亚洲必赢官网 6

Chartist
库很适合于成立雅观、响应能力强、阅读友好的图纸。Chartist 使用 SVG
来显示图表。

Chartist
还提供了使用 CSS 媒体询问和创意动画来自定义图表的能力。用户使用 Chartist
在图纸设计中贯彻协调的保有创意。

Chartist
易于配置,也不难使用 Sass 举办定制。然而,它不扶助旧浏览器。

采纳Chartist,可以通过 CSS 的体制来吹嘘你的
SVG,用户完全可以切实自己所想的装有图表样式。

使用 npm
安装 Chartist:

npm
install chartist –save 

Chartist
创造具有自定义标签的饼图的代码示例: 

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

 

Flot

链接:

Flot 是一个纯 Javascript 绘图库,作为 jQuery
的插件使用。它能够比较轻松地跨浏览器工作,甚至包蕴 IE6。因为 jQuery
的表征,开发者可以健全地控制图表的卡通片、交互,把数据的变现进程优化得越发完善。

链接:http://www.amcharts.com/

FlexChart

 亚洲必赢官网 7

FlexChart
是高性能的图样工具。使用
FlexChart,可轻松的将表格数据可视化为业务图表。FlexChart
不但辅助周边的图纸类型,如折线图、饼状图、面积图等,还接济气泡图、K线图、条形图、漏斗图等高档图形类型。

FlexChart
的运用也丰富大致,FlexChart 图表将享有与数量有关的天职都寄托给
CollectionView 类,只需操作 CollectionView
类,就能促成过滤、排序和分组数据等效果。

FlexChart
包括的图纸元素也比较周全,如图表图例、图表标题、图表页脚、数轴、图表
series
和标签等,用户也能够为图表添加自定义的因素,如平均线和趋势线等。

FlexChart
本质上是一种交互式的图纸,不论是数码开展任何的改动,都会自动感应在图片上,如图表曲线随多寡推广减弱、过滤、钻取、动画等。

查看
FlexChart
的中经济学习指南和旭日图Demo。

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

 

FusionCharts Free

链接:

FusionCharts Free 是可跨平台、跨浏览器的 Flash 图表解决方案,它可以被
ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、不难 HTML 页面甚至 PPT
调用。在使用进度中,用户原则上并不必要知道其他 Flash
的学问,只需求精晓你所用的编程语言,并展开简要的调用即能够兑现应用

amCharts 是一款高档图表库,致力于对 Web
上的多少可视化提供支撑。它所支持的图片包含柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、焚烧图和金字塔图等等。amCharts
库是一款完全独立的类库,在应用中不借助任何其余第三方类库,就可径直编译运行。除了提供最宗旨的标准要素外,amCharts
还提供了互动特性。用户在浏览基于 amCharts 制作的图样时,用鼠标 hover
图表内容,能够与其开展交互,使图表显示细节新闻,其中表现新闻的器皿被叫做
Balloon(气球)。除此之外图表可以动态动画的款型被绘制出来,带来了了卓殊好的来得效果。

Echarts

 亚洲必赢官网 8

Echarts
是网页的数码可视化方面的一个要命实用的库。使用
Echarts,开发者可以创设直观的、可自定义的交互式图表,让数据的显示和剖析变得万分简单。

是因为
Echarts 是用一般的 JavaScript 编写的,所以 Echarts
不设有任何图表库存在的一筹莫展无缝迁移的题材。

与此同时,Echarts
也提供了无独有偶合法文档供用户查看。

选用 npm
可以很简单的形成 Echarts 的安装:

npm
install echarts –save 

Echarts
绘制散点图代码示例: 

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);
}

 

Google Chart

链接:

不须求多介绍,我们都卓殊精通的可视化工具

Cesium

NVD3

亚洲必赢官网 9

NVD3 是由
迈克 Bostock 创作的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web
应用程序中创立美丽的、可复用的图片。

NVD3
具有很有力的图片功效,可以很方便的创立箱形图、旭日形和烛台图等。假设用户想在
JavaScript 图表库中用到大方的力量,推荐试用 NVD3

NVD3
图表库的进程有时可能会成为一个题材,与 Fastdom 安装合营使用,速度会更快。

NVD3
绘制不难的折线图代码示例: 

/*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 <svg> element you want to render the chart in.   
      .datum(myData)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});
/**************************************
 * Simple test data generator
 */
function sinAndCos() {
  var sin = [],sin2 = [],
      cos = [];

  //Data is represented as an array of {x,y} pairs.
  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  //Line chart data should be sent as an array of series objects.
  return [
    {
      values: sin,      //values - represents the array of {x,y} data points
      key: 'Sine Wave', //key  - the name of the series.
      color: '#ff7f0e'  //color - optional: choose your own line color.
    },
    {
      values: cos,
      key: 'Cosine Wave',
      color: '#2ca02c'
    },
    {
      values: sin2,
      key: 'Another sine wave',
      color: '#7777ff',
      area: true      //area - set to true if you want this line to turn into a filled area chart.
    }
  ];
}

 

HighCharts

链接:

HighCharts 是一个界面赏心悦目,时下非凡流行的的纯 Javascript
图表库。它实质上由两有些构成:HighCharts 和 Highstock。其中 HighCharts
可以很轻便地在 Web 网站或是 Web
应用程序中添加可互相图表,并可免开支于个人学习、个人网站和任何非商业用途。近期HighCharts
支持的图片类型有曲线图、区域图、柱状图、饼状图、散点图和有些综合图表。而
HighStock
可以为用户方便地建立股票或一般的岁月轴图表。它提供先进的领航选项,预设的日期范围,日期选取器,滚动和平移等公盟。

Cesium

C3.js

亚洲必赢官网 10 


TauCharts 相同,C3.js 也是一个相当管用的根据 D3
的图样可视化库。其它,C3.js
允许用户创制可定制的所有个人风格的类。

C3.js
看起来是个相比难的库,可是假若了解了 C3.js
技艺,就能百发百中的使用了。

有了
C3.js
图表库,固然在首先次渲染之后,用户也可以经过创办回调来更新图表。C3.js
也同意用户为温馨的 Web 应用程序创设可复用的图纸,从而裁减工作量。

使用 npm
安装 C3.js 图表库:

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']
        ]
    }
});

 

Leaflet

链接:

Leaflet 是一个足以而且可以运转于桌面和活动端的 Javascript
可互相地图库。它选用 OpenStreetMap
的数据,并把可视化数据集中在一块儿。Leaflet
库的内核库很小,但由丰盛的插件能够大幅拓展其作用,平日被用来必要出示地理地点的种类。

链接:http://cesiumjs.org/

TauCharts

 亚洲必赢官网 11 

TauCharts
是最灵敏的 JavaScript 图表库之一。它是基于 D3
创设的,是一个以数量为主导的 JavaScript
图表库,可以革新数据可视化的功能。

TauCharts
分外灵活,访问其 API 也不行无拘无束。TauCharts
为用户提供了无缝映射和可视化的数目,使用 TauCharts
可以统筹出非凡美丽的数码界面。同时,TauCharts 也和易于学习。

通过 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');

 

MetricsGraphics

链接:

MetricsGraphics.js 是一个根据D3,为可视化和时间序列化的多寡而优化的库。它提供了一种便民的办法,用相同且响应式格局来爆发同样档次的图样。它现在支撑折线图、散点图、直方图、地毯图和主导的线性回归图。同时,它体积非常小巧,常常能够操纵在
60kb 之内。

Cesium 同样令人瞩目于地理数据可视化,它是一个 Javascript 库,可以在 Web
浏览器中绘制 3D/2D 地球。无需任何插件即可依照 WebGL
来拓展硬件加速。除此之外,它还有跨平台、跨浏览器的表征。Cesium 本身基于
Apache 开源协议,帮忙商业及非商业项目。

Recharts

 亚洲必赢官网 12

ReCharts
是一个选择 React 构建的,基于 D3 的图表库。

应用
ReCharts,用户可以在 React Web 应用程序中无缝地编写图表。

Recharts
相当轻快,并行使 SVG 元从来创建很怪异的图片。

使用 npm
安装 Recharts:

npm
install recharts 

Recharts
没有冗长的文档,它很直白。当您境遇困难时,使用 Recharts
可以很简单找到解决方案。

Recharts
创设自定义内容树图的代码示例:

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 (
      <g>
        <rect
          x={x}
          y={y}
          width={width}
          height={height}
          style={{
            fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none',
            stroke: '#fff',
            strokeWidth: 2 / (depth + 1e-10),
            strokeOpacity: 1 / (depth + 1e-10),
          }}
        />
        {
          depth === 1 ?
          <text
            x={x + width / 2}
            y={y + height / 2 + 7}
            textAnchor="middle"
            fill="#fff"
            fontSize={14}
          >
            {name}
          </text>
          : null
        }
        {
          depth === 1 ?
          <text
            x={x + 4}
            y={y + 18}
            fill="#fff"
            fontSize={16}
            fillOpacity={0.9}
          >
            {index + 1}
          </text>
          : null
        }
      </g>
    );
  }
});

const SimpleTreemap = React.createClass({
    render () {
      return (
        <Treemap
          width={400}
        height={200}
        data={data}
        dataKey="size"
        ratio={4/3}
        stroke="#fff"
        fill="#8884d8"
        content={<CustomizedContent colors={COLORS}/>}
      />
    );
  }
})

ReactDOM.render(
  <SimpleTreemap />,
  document.getElementById('container')
);

 

Sigma.js

链接:

Sigma.js 是一个小心于图形绘制的 Javascript
库,它能够让开发者轻松地在友好的 Web
应用中公告网络图。它给提供了过多装置项,使开发者可以轻易地定义网络图的绘图方式。同时其也提供了拉长的
API,例如移动视图、刷新渲染、事件监听等等都足以无限制已毕,这让开发者可以在互相上拓展越来越多举行。

2 赞 5 收藏
评论

亚洲必赢官网 13

Chart.js

Flot

Chart.js

 亚洲必赢官网 14

当下,jQuery
已经变为 Web 开发人士非凡主要的工具。有了
Flot.js,前端设计也变得更其不难。

Flot.js
是 JavaScript 库中较为古老的图表库之一。固然如此,Flot.js
也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而低沉其性质。

Flot.js
有一个很周密的文档。当用户蒙受困难时,可以很不难地找到解决办法。Flot.js
也支撑旧版本的浏览器。

可以挑选不使用
npm 来安装 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 ]);
});

 

链接:http://www.chartjs.org/

总结

上述介绍的
JavaScript
库都是高质地的图表库。可是在攻读这么些库的长河中,可能会因为学习曲线陡峭或是缺少学习材料而遭遇困难,一种很好的方案是将那么些库结合起来使用。最终也欢迎我们补充越来越多的
JavaScript 图表库。

参照小说:

转发请申明来源:葡萄城控件

 

连锁阅读:

JavaScript中的内存泄漏以及如何处理
Top 10
JavaScript编辑器,你在用哪个?
JavaScript
开发人员需求明白的简写技巧

 

Chart.js
是一个不难、面向对象,为规划和开发者准备的图纸绘制工具库。它提供了六种基础图表类型。基于
Html5,响应式,协助所有现代浏览器。同时它不器重任何外部工具库,本身轻量级,且协助模块化,即开发者可以拆分
Chart.js
仅引入自己索要的片段进入工程。在精巧的体形中它同时协理可相互图表。

Chartist.js

Chartist.js

链接:https://gionkunz.github.io/chartist-js/

Chartist.js 是一个极度不难而且实用的 JavaScript 图表生成工具,它协理 SVG
格式,图表数据转换灵活,同时也帮忙多种图片突显情势。在工程中,Chartist.js
的 CSS 和 JavaScript
分离,因而代码相比短小,在使用时布置流程至极简单易行。它生成的是响应式图表,可以自行援救不一样的浏览器尺寸和分辨率,更加多的是,它也支撑自定义
SASS 架构。

D3

D3

链接:http://vis.stanford.edu/papers/d3

二〇一一年,迈克 Bostock、Vadim Ogievetsky 和 Jeff Heer 公布了 D3,它是眼前
Web 端评价最高的 Javascript 可视化工具库。D3
可以向用户提供大量线性图和条形图之外的纷纭图表样式,例如 Voronoi
图、树形图、圆形集群和单词云等等。它的助益是实例丰裕,易于落到实处调试数据同时可以因此增添达成任何想到的数量可视化效果,缺点是学习窍门比较高。与
jQuery 类似,D3 直接对 DOM
进行操作,那是它与其它可视化工具的主要分歧所在:它会设置单独的目标以及功效集,并透过正规
API 举办 DOM 调用。

echarts

echarts

链接:http://echarts.baidu.com/

一款免费开源的数目可视化产品,给用户提供直观、生动、可交互和可个性化定制的数额可视化图表。Echarts
上手容易。其拥有的拖拽重计算、数据视图、值域漫游等特征大大加强了用户体验,协理用户在对数码挖掘、整合时大幅升高功能。同时,Echarts
提供了丰裕的图纸类型,除了周边的折柱饼,还辅助地图、力导向图、treemap、热力图、树图等等。更惊艳的是,它还匡助任意维度的堆积和多图表混合表现。一言以蔽之,那是一款让大家越发惊喜的可视化产品,格外有力,不过他图表不是很顺眼,对移动端的支持也还有些欠缺,然则那几个标题在官方最新揭橥的3.0beta中获得了很大改进

Flot

Flot

链接:http://www.flotcharts.org/

Flot 是一个纯 Javascript 绘图库,作为 jQuery
的插件使用。它可以相比较轻松地跨浏览器工作,甚至包蕴 IE6。因为 jQuery
的特色,开发者能够圆满地决定图表的卡通、交互,把数量的显现进度优化得尤其完美。

FusionCharts
Free

FusionCharts

链接:http://www.fusioncharts.com/

FusionCharts Free 是可跨平台、跨浏览器的 Flash 图表解决方案,它亦可被
ASP、.NET、PHP、JSP、ColdFusion、Ruby on Rails、不难 HTML 页面甚至 PPT
调用。在利用进度中,用户原则上并不必要知道其余 Flash
的知识,只需要领会您所用的编程语言,并开展简短的调用即可以达成利用。

Google
Chart

Google

链接:http://developers.google.com/chart/

不要求多介绍,我们都尤其了然的可视化工具。

HighCharts

HighCharts

链接:http://www.highcharts.com/

HighCharts 是一个界面雅观,时下非常流行的的纯 Javascript
图表库。它事实上由两有些组成:HighCharts 和 Highstock。其中 HighCharts
可以很轻便地在 Web 网站或是 Web
应用程序中添加可相互图表,并可免花费于个人学习、个人网站和任何非商业用途。方今HighCharts
协助的图纸类型有曲线图、区域图、柱状图、饼状图、散点图和有些归纳图表。而
HighStock
可以为用户方便地创制股票或相似的小时轴图表。它提供先进的导航选项,预设的日子范围,日期选用器,滚动和平移等公盟。

Leaflet

Leaflet

链接:http://leafletjs.com/

Leaflet 是一个方可而且可以运转于桌面和活动端的 Javascript
可互相地图库。它使用 OpenStreetMap
的数量,并把可视化数据汇总在一道。Leaflet
库的内核库很小,但由丰硕的插件可以大幅拓展其作用,日常被用于须求浮现地理地点的项目。

MetricsGraphics

MetricsGraphics

链接:http://metricsgraphicsjs.org/

MetricsGraphics.js 是一个基于
D3,为可视化和岁月连串化的数量而优化的库。它提供了一种便民的主意,用同一且响应式方式来发生同样档次的图纸。它现在帮忙折线图、散点图、直方图、地毯图和基本的线性回归图。同时,它体积非凡小巧,平日可以决定在
60kb 之内。

Sigma.js

Sigma.js

链接:http://sigmajs.org/

Sigma.js 是一个留意于图形绘制的 Javascript
库,它可以让开发者轻松地在协调的 Web
应用中发表网络图。它给提供了过多安装项,使开发者可以随心所欲地定义网络图的绘图方式。同时其也提供了足够的
API,例如移动视图、刷新渲染、事件监听等等都足以随意已毕,那让开发者可以在互相上拓展越来越多举办。

网站地图xml地图