有哪些用 JavaScript 实现的图形库

JavaScript018

有哪些用 JavaScript 实现的图形库,第1张

D3.js

D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM,然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的

HMTL 表格,或是利用它的流体过度和交互,用相似的数据创建惊人的 SVG 条形图。

ChartJS

Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas

基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于

5KB。

Highcharts JS

Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE

和火狐等等对个人用户完全免 费纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言:不管是

PHP、Asp.net 还是 Java 都可以使用。

Fusioncharts

FusionCharts Suite XT 是个专业的 JavaScript

图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可 点击的

legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。

Flot

Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为

flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+,

Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

Chartist.js

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS

定制。另外 Chartist.js 提供很酷的动画。

n3-charts

如果你是一个 AngularJS 开发者,你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上,提供了可定制的

AngularJS 指令的形式不同标准的图表。

Ember Charts

Ember Charts 是一个基于 Ember.js 和 D3.js

的图表库。它包括时间序列、柱状图、饼图、点图,很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展的。

Chartkick

Chartkick 是专为 Ruby 应用程序的 JavaScript

图表库。它提供了所有主要的图表类型,如饼图,柱形图,条形图,面积,地理,时间,以及多个系列。

MeteorCharts

它有一个很酷的图表生成器,为您提供选项来选择图表,选择主题,然后生成一个图表。

amCharts

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5

Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

EJS图表声称自己是企业准备的图表库。图表看起来很干净,可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

uvCharts 是一个开源的 JavaScript 图表库,号称有100多个自定义选项。它拥有12种不同的标准图表类型,开箱即用。

ECharts

基于 Canvas,纯 JavaScript

图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。

主动性,大意是“个体按照自己规定或设置的目标行动,而不依赖外力推动的行为品质”。

可以看出就是自己主动的去做些什么,而不是被动的等待。但我有一个不太好的习惯,就是我每到一个新团队中的时候,我一般会观望一阵,上面安排什么我就做什么,不会主动的去推动什么。

这在一般情况甚至于绝大多数的情况下,都是相对正确的选择。没有错。但在某些条件下,它不是一个正确的选择。

因为我现在在北京出差嘛,临时的加入一些新团队。因为是半途加入,所以给我安排什么,我就做什么,做不了就向领导反映,然后等待下一步指示。

但问题是,给我安排的工作任务,是不合理的。因为负责的是产品经理,它相对不太懂技术,而这个团队中又没有前端人员。后端技术负责人又被产品经理隔离。

当时的情况很纠结,项目已经在线上运行,但需要添加一个JS动画图表。这个JS图表库名为limitless.js,是基于D3.js的。

但这个JS库我从来都没用过它,而且这个东西是项目组老大花钱买的!这就意味着不太可能换JS库。而这个limitless.js它的文档只有寥寥几个参数的说明,却没有网上每种效果的配置实例。

就好比,各种调料都给你备好了,并告诉你这些东西能做个宫爆鸡丁,但具体怎么炒?没有,你得自己试。

我日啊,我当时只有2天时间,怎么试得过来。我就跟他们反复的沟通,后来这个需求砍掉了。

如果我不是一开始就主动去跟他们沟通的话,这个“ 需求完不成 ”的锅,就要扣在我的头上啦!

D3是目前最流行的JavaScript可视化图表库之一,D3的图表类型非常丰富,并且支持SVG格式,因此应用十分广泛,也有很多图表插件基于D3开发,比如MetricsGraphics.js,在D3上构建的数据图表非常强大。

D3的特点

允许绑定任意数据到DOM,将数据驱动转换应用到Document中。

不仅可以创建精美的HTML表格,而且可以绘制折线图、柱形图和饼图等数据图表。

支持SVG,在Web页面上渲染毫无压力。

回到顶部

D3的使用方法

关于D3的具体用法,可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。

index.html代码:

<!DOCTYPE html>

<meta charset="utf-8">

<style>

 

svg {

  font: 10px sans-serif

}

 

.y.axis path {

  display: none

}

 

.y.axis line {

  stroke: #fff

  stroke-opacity: .2

  shape-rendering: crispEdges

}

 

.y.axis .zero line {

  stroke: #000

  stroke-opacity: 1

}

 

.title {

  font: 300 78px Helvetica Neue

  fill: #666

}

 

.birthyear,

.age {

  text-anchor: middle

}

 

.birthyear {

  fill: #fff

}

 

rect {

  fill-opacity: .6

  fill: #e377c2

}

 

rect:first-child {

  fill: #1f77b4

}

 

</style>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

 

var margin = {top: 20, right: 40, bottom: 30, left: 20},

    width = 960 - margin.left - margin.right,

    height = 500 - margin.top - margin.bottom,

    barWidth = Math.floor(width / 19) - 1

 

var x = d3.scale.linear()

    .range([barWidth / 2, width - barWidth / 2])

 

var y = d3.scale.linear()

    .range([height, 0])

 

var yAxis = d3.svg.axis()

    .scale(y)

    .orient("right")

    .tickSize(-width)

    .tickFormat(function(d) { return Math.round(d / 1e6) + "M" })

 

// An SVG element with a bottom-right origin.

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.left + margin.right)

    .attr("height", height + margin.top + margin.bottom)

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

 

// A sliding container to hold the bars by birthyear.

var birthyears = svg.append("g")

    .attr("class", "birthyears")

 

// A label for the current year.

var title = svg.append("text")

    .attr("class", "title")

    .attr("dy", ".71em")

    .text(2000)

 

d3.csv("population.csv", function(error, data) {

 

  // Convert strings to numbers.

  data.forEach(function(d) {

    d.people = +d.people

    d.year = +d.year

    d.age = +d.age

  })

 

  // Compute the extent of the data set in age and years.

  var age1 = d3.max(data, function(d) { return d.age }),

      year0 = d3.min(data, function(d) { return d.year }),

      year1 = d3.max(data, function(d) { return d.year }),

      year = year1

 

  // Update the scale domains.

  x.domain([year1 - age1, year1])

  y.domain([0, d3.max(data, function(d) { return d.people })])

 

  // Produce a map from year and birthyear to [male, female].

  data = d3.nest()

      .key(function(d) { return d.year })

      .key(function(d) { return d.year - d.age })

      .rollup(function(v) { return v.map(function(d) { return d.people }) })

      .map(data)

 

  // Add an axis to show the population values.

  svg.append("g")

      .attr("class", "y axis")

      .attr("transform", "translate(" + width + ",0)")

      .call(yAxis)

    .selectAll("g")

    .filter(function(value) { return !value })

      .classed("zero", true)

 

  // Add labeled rects for each birthyear (so that no enter or exit is required).

  var birthyear = birthyears.selectAll(".birthyear")

      .data(d3.range(year0 - age1, year1 + 1, 5))

    .enter().append("g")

      .attr("class", "birthyear")

      .attr("transform", function(birthyear) { return "translate(" + x(birthyear) + ",0)" })

 

  birthyear.selectAll("rect")

      .data(function(birthyear) { return data[year][birthyear] || [0, 0] })

    .enter().append("rect")

      .attr("x", -barWidth / 2)

      .attr("width", barWidth)

      .attr("y", y)

      .attr("height", function(value) { return height - y(value) })

 

  // Add labels to show birthyear.

  birthyear.append("text")

      .attr("y", height - 4)

      .text(function(birthyear) { return birthyear })

 

  // Add labels to show age (separate not animated).

  svg.selectAll(".age")

      .data(d3.range(0, age1 + 1, 5))

    .enter().append("text")

      .attr("class", "age")

      .attr("x", function(age) { return x(year - age) })

      .attr("y", height + 4)

      .attr("dy", ".71em")

      .text(function(age) { return age })

 

  // Allow the arrow keys to change the displayed year.

  window.focus()

  d3.select(window).on("keydown", function() {

    switch (d3.event.keyCode) {

      case 37: year = Math.max(year0, year - 10) break

      case 39: year = Math.min(year1, year + 10) break

    }

    update()

  })

 

  function update() {

    if (!(year in data)) return

    title.text(year)

 

    birthyears.transition()

        .duration(750)

        .attr("transform", "translate(" + (x(year1) - x(year)) + ",0)")

 

    birthyear.selectAll("rect")

        .data(function(birthyear) { return data[year][birthyear] || [0, 0] })

      .transition()

        .duration(750)

        .attr("y", y)

        .attr("height", function(value) { return height - y(value) })

  }

})