14款基于javascript的数据可视化工具,前端开发者常用的9个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个产品进行不难介绍。

AnyChart

美高梅开户网址 1

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

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

14款基于javascript的数据可视化工具,前端开发者常用的9个JavaScript图表库。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

链接:

二零一一年,迈克 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

二零一一年,Mike 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地图