浙江省高等学校教师教育理论培训

微信搜索“毛凌志岗前心得”小程序
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
xCharts - JavaScript 图表库 - 开源中国

xCharts - JavaScript 图表库 - 开源中国

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库，他使用HTML，CSS，SVG实现图表，xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。

下面是演示效果：

xCharts 演示 : 在线演示查看源码

HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
    <link rel="stylesheet" href="http://sandbox.runjs.cn/js/sandbox/xCharts/xcharts.min.css">
    <script src="http://sandbox.runjs.cn/js/sandbox/other/d3.v2.min.js"></script>
    <script src="http://sandbox.runjs.cn/js/sandbox/xCharts/xcharts.min.js"></script>
    <body>
        <figure style="height: 300px" id="chart">
        </figure>
        <p>
            更多关于xCharts，<a href="http://www.oschina.net/p/xcharts">点击这里</a>
        </p>
    </body>
</html>

JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
(function () {
var data = [{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":15,"x":"2012-11-19T00:00:00"},{"y":11,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":10,"x":"2012-11-22T00:00:00"},{"y":1,"x":"2012-11-23T00:00:00"},{"y":6,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"line-dotted","yScale":"linear"},{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":12,"x":"2012-11-19T00:00:00"},{"y":18,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":7,"x":"2012-11-22T00:00:00"},{"y":6,"x":"2012-11-23T00:00:00"},{"y":12,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"cumulative","yScale":"linear"},{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":12,"x":"2012-11-19T00:00:00"},{"y":18,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":7,"x":"2012-11-22T00:00:00"},{"y":6,"x":"2012-11-23T00:00:00"},{"y":12,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"bar","yScale":"linear"}];
var order = [0, 1, 0, 2],
  i = 0,
  xFormat = d3.time.format('%A'),
  chart = new xChart('line-dotted', data[order[i]], '#chart', {
    axisPaddingTop: 5,
    dataFormatX: function (x) {
      return new Date(x);
    },
    tickFormatX: function (x) {
      return xFormat(x);
    },
    timing: 1250
  }),
  rotateTimer,
  toggles = d3.selectAll('.multi button'),
  t = 3500;
 
function updateChart(i) {
  var d = data[i];
  chart.setData(d);
  toggles.classed('toggled', function () {
    return (d3.select(this).attr('data-type') === d.type);
  });
  return d;
}
 
toggles.on('click', function (d, i) {
  clearTimeout(rotateTimer);
  updateChart(i);
});
 
function rotateChart() {
  i += 1;
  i = (i >= order.length) ? 0 : i;
  var d = updateChart(order[i]);
  rotateTimer = setTimeout(rotateChart, t);
}
rotateTimer = setTimeout(rotateChart, t);
}());

CSS :

1
2
3
p{
    color:white;
}
Powered By RunJS

tenXer / xcharts

Watch852 Fork55

A D3-based library for building custom charts and graphs. — More...

http://tenxer.github.com/xcharts/

Issues
#18update options without rebuilding chart?by kenbudgell  2012-12-29
#17Pie Graphby Apathetic012  2012-12-29
#15Homepage doesn't render correctly in Safari 5.1by zsong  2012-12-28
#9Add options for labeling the x- and y-axesby paularmstrong  2012-12-28
#11x-axis labels doe not display if all x values are identical and xScale is linear
posted on 2012-12-31 20:17  lexus  阅读(694)  评论(0)    收藏  举报