收藏:D3.js + NVD3.js可视化库

基于D3.js的NVD3.js做出来的图表交互效果挺不错的。不过如果是刚接触的话,不清楚有什么参数的话,总是要折腾很久,网上中文资料也比较少。

D3.js: https://d3js.org/

NVD3: http://nvd3.org/index.html

再分享多一个网址,这里把所有的参数都列出来,还是在线编辑,学习D3参数的最佳:

angular-nvd3:http://krispo.github.io/angular-nvd3/#/

例如这个例子:http://krispo.github.io/angular-nvd3/#/lineChart

点击Extended就能看到所有的参数。

2017-04-25-09-50-57

 

再来一个网址:http://jsfiddle.net/3r88bgjw/, 解决了我的2个问

1,x轴的刻度显示的时间会不正确

        chart.lines.xScale(d3.time.scale());  // 要加这一句刻度才正确
        var timeFormat = d3.time.format('%m-%d');
        chart.xAxis //Chart x-axis settings
            .tickFormat(timeFormat);

 

另外,也要注意时间,统一从0点开始较好。

2,tooltip上显示的时间与x轴的刻度显示的时间格式不一样

如x轴的刻度显示“年-月”,但是在tooltip(鼠标放上去显示的详细)上显示“年-月-日”

 // set up the tooltip to display full dates
 var tsFormat = d3.time.format('%Y-%m-%d');
 var contentGenerator = chart.interactiveLayer.tooltip.contentGenerator();
 var tooltip = chart.interactiveLayer.tooltip;
 tooltip.contentGenerator(function (d) { d.value = d.series[0].data.x; return contentGenerator(d); });
 tooltip.headerFormatter(function (d) { return tsFormat(new Date(d)); });

 

nvd3.js文档

http://nvd3-community.github.io/nvd3/examples/documentation.html

~完

 

5 回复

评论已关闭。