前端js制作动态条形图

最新推荐文章于 2023-11-11 21:24:30 发布

哆啦A梦是童年

最新推荐文章于 2023-11-11 21:24:30 发布

阅读量1.5k

点赞数 4

文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/weixin_43487246/article/details/108379945

版权

动态条形图

小伙伴们可以去我的网盘下载这个项目解压导入到开发工具或者直接打开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文件的格式

在这里插入图片描述

哆啦A梦是童年

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
前端js制作动态条形图

动态条形图小伙伴们可以去我的网盘下载这个项目解压导入到开发工具或者直接打开html文件也可以效果如下图,当然会动的下面只是个图片链接: https://pan.baidu.com/s/1AJorh5h9sq7TlXXqhTr7sQ 提取码: cjxt...
复制链接

扫一扫