datetimepicker没有显示bootstrap和nv.d3饼图

时间:2013-12-10 07:01:20

标签: asp.net jquery twitter-bootstrap

我在加载jquery datetime picker时遇到问题。我使用了bootstrap以及nv.d3图表。请帮助我。

这里当我点击输入然后日历没有显示以及它在javascript中的更改功能由于某些问题而无效。请帮我显示该日历。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
        <link href="Styles/datepicker.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
        <link href="nv.d3.css" rel="stylesheet" type="text/css" />
        <script src="d3.v3.js" type="text/javascript"></script>
        <script src="nv.d3.js" type="text/javascript"></script>   
        <script src="mychart.js" type="text/javascript"></script>
        </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div class="input-append date" id="dp1" style="width: 200px; height: 100px;  float:right;
    margin-top: 60px; margin-left: 200px; display: inline-block">
    End Date:
 <input class="span1" size="16" type="text" id="end" runat="server" />
 <span class="add-on"><i class="icon-calendar"></i></span>
 </div>
 <div class="input-append date" id="dp2" style="width: 200px; height: 100px; float: right;
    margin-top: 60px; margin-left: 100px; display: inline-block">
    Start Date:
 <input class="span2" size="16" type="text" id="start" runat="server" />
 <span class="add-on"><i class="icon-calendar"></i></span>
 </div>
 <div id='chart'style="width: 400px; height: 200px; padding-top:100px; display:inline-lock">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style='height: 400px'>
 </svg>
 </div>
 </asp:Content>

My javascript code

window.onload = nv.addGraph;
var chart = nv.models.pieChart();
var startDate;
var endDate;

$('#dp2').datepicker().on('changeDate', function (ev) {    
    $("#chart svg").html('');
    nv.addGraph();
});

$('#dp1').datepicker().on('changeDate', function (ev) {    
    $("#chart svg").html('');
    nv.addGraph();
});

nv.addGraph(function () {

    var startDate = $("#dp2 input").val();
    var endDate = $("#dp1 input").val();

    $.ajax({
        type: "POST",
        url: ("Default.aspx/GetData"),
        data: "{startDate:'" + startDate + "',endDate:'" + endDate + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {


            var data = $.parseJSON(result.d);
           // console.log(data);


            chart.x(function (d) { return d.label });
            chart.y(function (d) { return d.value });
            chart.showLabels(false);


            d3.select("#chart svg")
            .datum(data)
            .transition().duration(1200)
            .call(chart);

            return chart;

        },
        error: function (xhr, txt, err) {
            alert("error connecting to data: " + txt);
        }

    });
});

0 个答案:

没有答案