xCharts - JavaScript 图表库 - 开源中国

xCharts - JavaScript 图表库 - 开源中国

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

下面是演示效果：

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

HTML :

< 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 :

( 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 :

p{
    color : white ;
}

Powered By RunJS

tenXer / xcharts

Watch 852 Fork 55

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

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

Issues
#18	update options without rebuilding chart?	by kenbudgell  2012-12-29
#17	Pie Graph	by Apathetic012  2012-12-29
#15	Homepage doesn't render correctly in Safari 5.1	by zsong  2012-12-28
#9	Add options for labeling the x- and y-axes	by paularmstrong  2012-12-28
#11	x-axis labels doe not display if all x values are identical and xScale is linear