zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    Kettle初使用
    Datax初使用
    代码层次上的软件质量属性
    第二周周总结
    软件质量属性---可修改性
    淘宝网中的软件质量属性
    第一周周总结
    2020寒假（12）
    2020寒假（11）
    2020寒假（10）
  • 原文地址：https://www.cnblogs.com/lexus/p/2840963.html
Copyright © 2011-2022 走看看