图表没有显示在网页上

2024-09-30 13:29:03 发布

您现在位置：Python中文网/ 问答频道 /正文
3211 3

所以在这里，我尝试使用flask作为我的服务器，mongodb作为数据库，并使用dc.js公司，敏锐-仪表板.css以及其他基本要求。你知道吗

当我试图执行我的命令时应用程序类型通过控制台，没有发生错误。 然后我去浏览器，并检查任何图形，没有图形显示，只有基本的文本在我的索引.html已打印。有什么原因吗？你知道吗

这个小项目的灵感来自adil moujahid，他用dc、d3、flask和mongodb构建了一个仪表板。 因为之前的文章由于缺少代码片段而不清楚。 以下是一些： 索引.html

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" href="C:/Users/vaibhav/Desktop/dashboard/static/lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="C:/Users/vaibhav/Desktop/dashboard/static/lib/css/keen-dashboards.css">
    <link rel="stylesheet" href="C:/Users/vaibhav/Desktop/dashboard/static/lib/css/dc.css">
    <link rel="stylesheet" href="C:/Users/vaibhav/Desktop/dashboard/static/css/custom.css">

</head>

<body class="application">


    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">CityCensus Dashboard</a>
            </div>
        </div>
    </div>


    <div class="container-fluid">

        <div class="row">

            <div class="col-sm-6">
                <div class="row">

                    <!--malepercity pie-->
                    <div class="col-sm-6">
                        <div class="chart-wrapper">
                            <div class="chart-title">
                                Male population
                            </div>
                            <div class="chart-stage">
                                <div id="#malepercity-row-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <hr>
    <p class="small text-muted">Built with &#9829; by <a href="https://keen.io">Keen IO</a></p>


    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/jquery.min.js"></script>
    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/bootstrap.min.js"></script>
    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/crossfilter.js"></script>
    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/d3.js"></script>
    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/dc.js"></script>
    <script src="C:/Users/vaibhav/Desktop/dashboard/static/lib/js/queue.js"></script>

    <script src="C:/Users/vaibhav/Desktop/dashboard/s`enter code here`tatic/lib/js/keen.min.js"></script>
    <script src='C:/Users/vaibhav/Desktop/dashboard/static/js/graphs.js' type='text/javascript'></script>
</body>
</html>

图形.js

queue()
    .defer(d3.json, "C:/mongodb/data/db/cities/census")
    .await(makeGraphs);

function makeGraphs(error, censusJson) {

    var citycensus = censusJson;
    censusJson.forEach(function (d) {
        d["population_male"]     = +d["population_male"];
        d["population_female"]   = +d["population_female"];
        d["literates_male"]      = +d["literates_male"];
        d["literates_female"]    = +d["literates_female"];
    })

    var ndx = crossfilter(citycensus);

    var namcity = ndx.dimensions(function (d) { return d["name_of_city"] });
    var namstat = ndx.dimensions(function(d) {return d["state_name"] });
    var popmale = ndx.dimensions(function (d) { return d["population_male"] });
    var popfemale = ndx.dimensions(function (d) { return d["population_female"] });
    var litmale = ndx.dimensions(function (d) { return d["literates_male"] });
    var litfemale = ndx.dimensions(function (d) { return d["literates_female"] });

    var all = ndx.groupAll();
    var percity = namcity.group();
    var malepercity = namstat.group().reduceSum(function (d) { return d["population_male"] });
    var femalepercity = namstat.group().reduceSum(function (d) { return d["population_female"] });
    var litmalepercity = namstat.group().reduceSum(function (d) { return d["literates_male"] });
    var litfemalepercity = namstat.group().reduceSum(function (d) { return d["literates_female"] });

    var maxmalepop = malepercity.top(1)[0].value;
    var maxfempop = femalepercity.top(1)[0].value;

    var malepercitychart = dc.rowChart("#malepercity-row-chart");

    malepercitychart
        .width(300)
        .height(250)
        .margins({ top: 25, left: 10, right: 10, bottom: 20 })
        .dimension(namstat)
        .group(malepercity)
        .colors(d3.scale.category10())
        .elasticX(true)
        .XAxis().ticks(4);

   dc.renderAll();



};

应用程序类型

 from flask import Flask
from flask import render_template

import pymongo
import json
from bson import json_util
from bson.json_util import dumps

app = Flask(__name__, template_folder='template')                                              
client= pymongo.MongoClient('localhost',27017)

MONGODB_HOST = 'localhost'
MONGODB_PORT = 27017
DBS_NAME = 'cities'
COLLECTION_NAME = 'census'
FIELDS = {'name_of_city': True, 'state_name': True , 'population_male': 
True, 'population_female': True, 'literates_male': True, 'literates_female': 
 True,'_id': False}

@app.route("/")
def index():
    return render_template("index.html")


@app.route("/cities/census")
def stats():
    connection = pymongo.MongoClient(MONGODB_HOST, MONGODB_PORT)
    collection = connection[DBS_NAME][COLLECTION_NAME]
    census = collection.find(projection=FIELDS)
    json_census = []
    for cen in census:
        json_census.append(cen)
    json_census = json.dumps(json_census, default=json_util.default)
    connection.close()
    return json_census

if __name__ == "__main__":
    app.run(host='0.0.0.0',port=5000,debug=True)

Tags： divjsonreturnvarlibjsscriptstatic
0条回答

目前没有回答

相关问题 更多 >

    编程相关推荐

    热门问题