Question

所以我认为我的网站到目前为止响应迅速。在我的div标签里面，id为“navResult”，我渲染了部分视图。该站点响应元素内部的数据量。但由于某些原因，当我使用chartJS图表加载局部视图时，该站点不响应图表的参数。相反，会添加一个滚动条，“https://ibb.co/ceRenw”。我不相信这与MVC有任何关系，但更多的是使用纯HTML和CSS。

<!DOCTYPE html>
<html> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title MM-3</title>
        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />

        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/unobtrusive")
        @model IEnumerable<RoboticUI.Models.ResultantRead>

        <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>    
        <script src="~/Scripts/AutocompleteScript.js"></script>
        <script src="~/Scripts/chartJsTrial.js"></script>
        <link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
    </head>
<body style="font-family:Verdana;">

    <div class="container">
        <header>
            <div class="headerContent">
            <p>Robot Gallery</p>
                </div>
        </header>

        <div class="menu-content" style="overflow:auto">
            <div class="menu">
                <p>@Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
                <p>@Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
                <p>@Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
            </div>
            <div id="navResult" class="main">

                <h2>Lorum Ipsum</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            </div>
        </div>
        <footer>Copyright &copy MMM</footer>
    </div>
    @RenderBody()
</body>

</html>

外部样式表。

header, footer {
    background-color: #68bbff;
    height: 5%;
    text-align: center;
}
div.headerContent p{
    display:inline-block;
}

div.headerContent p.CompanySearchBar{
    float:right;
}
div.container {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.menu {
    float: left;
    width: 5%;
    text-align: center;
}
.menu-content {
    padding-bottom: .2em;
}
.menu a {
        border: 2px solid #4CAF50;
        border-radius: 15px 100px;
        text-align: center;
        font-size: 12px;
        display:block;
        padding:20px;
}
.menu a:hover{
    background-color:#4CAF50;
}
.main {
    float: left;
    width: 95%;
    padding: 0 20px;
}

@media only screen and (max-width:620px) {
    /* For mobile phones: */
    .menu, .main, .right {
        width: 100%;
    }
}

调用图表的代码

console.log('test');
function getFun() {
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2",
        animationEnabled: true,
        title: {
            text: "Simple Column Chart in ASP.NET MVC"
        },
        subtitles: [
            { text: "Try Resizing the Browser" }
        ],
        data: [
        {
            type: "column", //change type to bar, line, area, pie, etc
            dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55 },
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 },
            { x: 60, y: 68 },
            { x: 70, y: 28 },
            { x: 80, y: 34 },
            { x: 90, y: 14 }
            ]
                                //Uncomment below line to add data coming from the controller.
        }
        ]
    });
    chart.render();
}

并在此局部视图中调用图表。

@{ 
}
<link rel="stylesheet" type="text/css" href="~/Content/Data.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
    <div id="chartContainer">
    </div>

Answer 1

我相信我通过将style="overflow: -webkit-paged-x;"添加到包含图表的每个div来解决我的问题。但是，这是正确的做法吗？还有另一种方法吗？我不想每次创建图表时都添加style="overflow: -webkit-paged-x;"。

CanvasJs图表在部分视图中无响应

1 个答案: