小伙伴们可以去我的网盘下载这个项目解压导入到开发工具或者直接打开html文件也可以效果如下图,当然会动的下面只是个图片;当然也可以看下我下面在html页面的写法
链接: https://pan.baidu.com/s/1AJorh5h9sq7TlXXqhTr7sQ 提取码: cjxt
需要的js各种文件在上面连接下载即可
把各种js和这个html放一块就可以了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="jquery-3.5.1.js"></script> <title>动态排名数据可视化 ver1.7 By Jannchie</title> </head> <body> <center> <input type="file" hidden id="inputfile" name="fileContent">//把hidden去掉就可以直接上传csv文件了 具体格式在下面 <svg width="1900" height="1020"></svg> <script src="config.js"></script> <script src="imgs.js"></script> <script src="color_ranges.js"></script> <script src="colors.js"></script> <script src="visual.js"></script> <link rel="stylesheet" href="stylesheet.css"> </center> </body> <script> $(function(){ var title="name,type,value,date"; var valueArray = "\n中国,Chinese,5,2019/1/1" + "\n中国,Chinese,4,2019/1/2" + "\n中国,Chinese,2,2019/1/3" + "\n中国,Chinese,3,2019/1/4" + "\n中国,Chinese,4,2019/1/5" + "\n中国,Chinese,5,2019/1/6" + "\n中国,Chinese,11,2019/1/7" + "\n中国,Chinese,15,2019/1/8" + "\n中国,Chinese,8,2019/1/9" + "\n中国,Chinese,9,2019/1/10" + "\n中国,Chinese,10,2019/1/20" + "\n中国,Chinese,11,2019/1/21" + "\n中国,Chinese,12,2019/1/22" + "\n中国,Chinese,13,2019/1/23" + "\n中国,Chinese,16,2019/1/24" + "\n中国,Chinese,19,2019/1/25" + "\n中国,Chinese,22,2019/1/26" + "\n中国,Chinese,59,2019/1/27" + "\n中国,Chinese,128,2019/1/28" + "\n中国,Chinese,359,2019/1/29" + "\n中国,Chinese,496,2019/1/30" + "\n中国,Chinese,1500,2019/1/31" + "\n英国,English,5,2019/1/2" + "\n英国,English,2,2019/1/3" + "\n英国,English,7,2019/1/4" + "\n英国,English,12,2019/1/5" + "\n英国,English,11,2019/1/6" + "\n英国,English,12,2019/1/7" + "\n英国,English,13,2019/1/8" + "\n英国,English,19,2019/1/9" + "\n英国,English,35,2019/1/10" + "\n英国,English,46,2019/1/20" + "\n英国,English,49,2019/1/21" + "\n英国,English,15,2019/1/22" + "\n英国,English,50,2019/1/23" + "\n英国,English,150,2019/1/24" + "\n英国,English,111,2019/1/25" + "\n英国,English,190,2019/1/26" + "\n英国,English,350,2019/1/27" + "\n英国,English,370,2019/1/28" + "\n英国,English,422,2019/1/29" + "\n英国,English,830,2019/1/30" + "\n英国,English,1200,2019/1/31" + "\n美国,USA,6,2019/1/2" + "\n美国,USA,9,2019/1/3" + "\n美国,USA,11,2019/1/4" + "\n美国,USA,2,2019/1/5" + "\n美国,USA,11,2019/1/6" + "\n美国,USA,12,2019/1/7" + "\n美国,USA,13,2019/1/8" + "\n美国,USA,14,2019/1/9" + "\n美国,USA,15,2019/1/10" + "\n美国,USA,22,2019/1/20" + "\n美国,USA,12,2019/1/21" + "\n美国,USA,35,2019/1/22" + "\n美国,USA,37,2019/1/23" + "\n美国,USA,45,2019/1/24" + "\n美国,USA,41,2019/1/25" + "\n美国,USA,56,2019/1/26" + "\n美国,USA,120,2019/1/27" + "\n美国,USA,250,2019/1/28" + "\n美国,USA,450,2019/1/29" + "\n美国,USA,920,2019/1/30" + "\n美国,USA,1150,2019/1/31"+ "\n日本,Japanese,1,2019/1/2" + "\n日本,Japanese,2,2019/1/3" + "\n日本,Japanese,6,2019/1/4" + "\n日本,Japanese,2,2019/1/5" + "\n日本,Japanese,5,2019/1/6" + "\n日本,Japanese,3,2019/1/7" + "\n日本,Japanese,9,2019/1/8" + "\n日本,Japanese,12,2019/1/9" + "\n日本,Japanese,19,2019/1/10" + "\n日本,Japanese,33,2019/1/20" + "\n日本,Japanese,34,2019/1/21" + "\n日本,Japanese,39,2019/1/22" + "\n日本,Japanese,45,2019/1/23" + "\n日本,Japanese,60,2019/1/24" + "\n日本,Japanese,120,2019/1/25" + "\n日本,Japanese,150,2019/1/26" + "\n日本,Japanese,350,2019/1/27" + "\n日本,Japanese,340,2019/1/28" + "\n日本,Japanese,370,2019/1/29" + "\n日本,Japanese,560,2019/1/30" + "\n日本,Japanese,920,2019/1/31"+ "\n韩国,Korean,1,2019/1/2" + "\n韩国,Korean,5,2019/1/3" + "\n韩国,Korean,3,2019/1/4" + "\n韩国,Korean,4,2019/1/5" + "\n韩国,Korean,6,2019/1/6" + "\n韩国,Korean,9,2019/1/7" + "\n韩国,Korean,12,2019/1/8" + "\n韩国,Korean,19,2019/1/9" + "\n韩国,Korean,25,2019/1/10" + "\n韩国,Korean,34,2019/1/20" + "\n韩国,Korean,45,2019/1/21" + "\n韩国,Korean,42,2019/1/22" + "\n韩国,Korean,56,2019/1/23" + "\n韩国,Korean,79,2019/1/24" + "\n韩国,Korean,110,2019/1/25" + "\n韩国,Korean,150,2019/1/26" + "\n韩国,Korean,260,2019/1/27" + "\n韩国,Korean,350,2019/1/28" + "\n韩国,Korean,370,2019/1/29" + "\n韩国,Korean,420,2019/1/30" + "\n韩国,Korean,850,2019/1/31" + "\n法国,France,56,2019/1/23" + "\n法国,France,79,2019/1/24" + "\n法国,France,150,2019/1/25" + "\n法国,France,160,2019/1/26" + "\n法国,France,220,2019/1/27" + "\n法国,France,450,2019/1/28" + "\n法国,France,370,2019/1/29" + "\n法国,France,680,2019/1/30" + "\n法国,France,1000,2019/1/31" var data = title + valueArray; var fileName = "download.csv"; initCsvLink(data,fileName); }); var initCsvLink = function(data,fileName){ data = "\ufeff"+data; var blob = new Blob([data], { type: 'text/csv,charset=UTF-8'}); var r = new FileReader(); r.readAsText(blob, config.encoding); r.onload = function () { //读取完成后，数据保存在对象的result属性中 var data = d3.csvParse(this.result); try { draw(data); } catch (error) { alert(error); } }; } </script> </html>csv文件的格式
