Question

我正在使用Chart JS。 http://www.chartjs.org/docs/

在MVC C＃中我有一个带数据和图形的部分视图：

<div style="width: 700px; height: 450px; float: left">
    <canvas id="fuelGraph" style="width: 700px; height: 450px;"></canvas>
</div>



<script type="text/javascript">
   var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var items = @Html.Raw(Json.Encode(fuelValues));
    var itemLabel = @Html.Raw(Json.Encode(dateValues));
    console.log(items);
    console.log(itemLabel);

    var lineChartData = {
        labels: itemLabel,
        datasets: [

            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: items
            }
       ]

    }

    $(document).ready(function() {
        var ctx = document.getElementById("fuelGraph").getContext("2d");

        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });

    });
</script>

当我第一次加载此部分视图时，图表按预期加载：

enter image description here

但是当我在关闭局部视图后再次加载此局部视图时，Canvas为空：

控制台中没有错误。我正在模态对话中加载这个部分视图。

修改

这是部分视图：

@model xPTCommon.DTO.AssetsDTO.FuelReadingsDTO


@{
    var fuelValues = Model.Readings.Select(s => s.FuelReading).ToArray();
    var dateValues = Model.Readings.Select(s => s.ReadingDateTime.ToString("dd/MM/yyyy HH:mm")).ToArray();
}
<div id="fuelGraphArea" style="width: 700px; height: 450px; float: left">
    <canvas id="fuelGraph" style="width: 700px; height: 450px;"></canvas>
</div>

<script type="text/javascript">
    var customLine;

    var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var items = @Html.Raw(Json.Encode(fuelValues));
    var itemLabel = @Html.Raw(Json.Encode(dateValues));

    var lineChartData = {
        labels: itemLabel,
        datasets: [

            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: items
            }
        ]

    }

    $(document).ready(function() {

        $('#fuelGraph').remove(); // this is my <canvas> element
        $('#fuelGraphArea').append('<canvas id="fuelGraph"><canvas>');
        var ctx = document.getElementById("fuelGraph").getContext("2d");
        ctx.canvas.width = 700; 
        ctx.canvas.height = 450;

        customLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    });
</script>

Controller：这是我从Ajax调用的方法，

public ActionResult AssetFuelDisplay(int assetId, int companyId)
{
    var model = DALProvider.GetFuelReadings(assetId, companyId);

    return PartialView(model);
}

这是一个简单的Ajax请求：

$.ajax({

method: 'GET',
url: @Url.Action("AssetFuelDisplay", "Controller"),
success: function(data){

$('partial-view').html(data);
$('partial-view').ShowModal();
}
})

Answer 1

尝试在打开jQueryUI对话框时初始化图表对象，并在关闭对话框事件中.destroy()。如果第二次仍无法正常工作，您也可以尝试设置maintainAspectRatio: false。

图表JS不在部分视图中重新加载

1 个答案: