xCharts:基于D3的JavaScript图表库

jopen 6年前

xCharts是 一款基于D3的JavaScript图表库,xCharts的功能非常强大,不仅支持多种图表类型,而且拥有丰富的图表主题风格,并且非常漂亮。另 外,xCharts的设计非常灵活,配置也比较简单,加载速度也还不错,是一款开放性和可定制性都非常不错的JavaScript图表应用。

xCharts的特点

  • 基于JavaScript,因此只要有浏览器即可使用,平台兼容性不错。
  • 开放,可定制,因此配置相当灵活。
  • 支持SVG格式,因此也可以方便地导出图表数据。

xCharts的使用

简单的柱形图

JavaScript代码:

var data = {    "xScale": "ordinal",    "yScale": "linear",    "main": [      {        "className": ".pizza",        "data": [          {            "x": "Pepperoni",            "y": 4          },          {            "x": "Cheese",            "y": 8          }        ]      }    ]  };  var myChart = new xChart('bar', data, '#example1');

效果图:

xCharts:基于D3的JavaScript图表库

线性图

JavaScript代码:

var data = {    "xScale": "time",    "yScale": "linear",    "type": "line",    "main": [      {        "className": ".pizza",        "data": [          {            "x": "2012-11-05",            "y": 1          },          {            "x": "2012-11-06",            "y": 6          },          {            "x": "2012-11-07",            "y": 13          },          {            "x": "2012-11-08",            "y": -3          },          {            "x": "2012-11-09",            "y": -4          },          {            "x": "2012-11-10",            "y": 9          },          {            "x": "2012-11-11",            "y": 6          }        ]      }    ]  };  var opts = {    "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },    "tickFormatX": function (x) { return d3.time.format('%A')(x); }  };  var myChart = new xChart('line', data, '#example3', opts);

效果图:

xCharts:基于D3的JavaScript图表库

动画柱形图

JavaScript代码:

var errorBar = {    enter: function (self, storage, className, data, callbacks) {      var insertionPoint = xChart.visutils.getInsertionPoint(9),        container,        // Map each error bar into 3 points, so it's easier to draw as a single path        // Converts each point to a triplet with y from (y - e) to (y + e)        // It would be better to use the `preUpdateScale` method here,        // but for this quick example, we're taking a shortcut          eData = data.map(function (d) {          d.data = d.data.map(function (d) {            return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}];          });          return d;        }),        paths;        // It's always a good idea to create containers for sets      container = self._g.selectAll('.errorLine' + className)
xChart.setVis('error', errorBar);
var data = {      "xScale": "ordinal",      "yScale": "linear",      "main": [        {          "className": ".errorExample",          "data": [            {              "x": "Ponies",              "y": 12            },            {              "x": "Unicorns",              "y": 23            },            {              "x": "Trolls",              "y": 1            }          ]        }      ],      "comp": [        {          "type": "error",          "className": ".comp.errorBar",          "data": [            {              "x": "Ponies",              "y": 12,              "e": 5            },            {              "x": "Unicorns",              "y": 23,              "e": 2            },            {              "x": "Trolls",              "y": 1,              "e": 1            }          ]        }      ]    };

效果图:

xCharts:基于D3的JavaScript图表库

总结

xCharts的功能相当强大,如果你在自己的Web应用中需要使用图表,那么xCharts非常适合你,可以尝试一下。


项目主页:http://www.open-open.com/lib/view/home/1417939155886


译文链接:http://www.codeceo.com/article/xcharts-d3-javascript-chart.html
翻译作者:码农网 – 小峰