基于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就能看到所有的参数。
再来一个网址: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条回应:“收藏:D3.js + NVD3.js可视化库”
我只想默默的拜读您的博客!
你的博客让人流连忘返!
闲着没事,随便逛逛,心静自然凉。
衣皇后:
百万张美女套图,上万部美女视频,一键转存,打包下载:
http://www.wen.yihuanghou.com/
衣皇后,等你来!
受教了!呵呵!