通过控制器MVC传递数据的Chart.js图表

Question

我试图通过将来自控制器的数据传递给它来显示图表。 我正在使用chart.js

模型：

public class DatapointLine
{
    public DatapointLine(double x, double y)
    {
        this.X = x;
        this.Y = y;
    }

    // setting the name to be used when serializing to JSON.
    [DataMember(Name = "x")]
    public Nullable<double> X = null;

    //setting the name to be used whenserializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> Y = null;
}

控制器：

public JsonResult BarChart()
        {
            List<DatapointLine> dataPoints = new List<DatapointLine>{
                new DatapointLine(10, 22),
                new DatapointLine(20, 36),
                new DatapointLine(30, 42),
                new DatapointLine(40, 51),
                new DatapointLine(50, 46),
            };

            ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

            return Json(dataPoints, JsonRequestBehavior.AllowGet);
        }

脚本：

<script type="text/javascript">

    $(function() {
        var data = getData();
        AutoFollow(data);
    });

    function getData() {
        var dateValue = [];
        var countValue = [];
        $.ajax({
            url: "/Supernethome/BarChart",
            dataType: 'json',
            async: false
        }).done(function(data) {
            data.forEach(function(data) {
                dateValue.push(data.X);
                countValue.push(data.Y);
            });
        });
        return {
            dateValue: dateValue,
            countValue: countValue
        };
    }
        $(document).ready(function () {function AutoFollow(data) {
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx,
            {
                type: 'bar',
                data: {
                    labels: data.dateValue, 
                    datasets: [
                        {
                            label: 'AutoFollow',
                            data: data.countValue, 
                            backgroundColor: "rgba(153,255,51,1)"
                        }, {
                            label: 'Manual',
                            data: [30, 29, 5, 5, 20, 3, 10],
                            backgroundColor: "rgba(255,153,0,1)"
                        }
                    ]
                }
            });
    }
    });

我在局部视图中生成图表的视图，然后在主视图中引用局部视图。

我收到以下错误：

 chartjs.init.js:3 Uncaught TypeError: Cannot read property 'getContext' of null at HTMLDocument.<anonymous> (chartjs.init.js:3) at f (jquery.js:1026) at Object.fireWith [as resolveWith] (jquery.js:1138) at Function.ready (jquery.js:427) at HTMLDocument.xt (jquery.js:97)

错误正在浪费大量时间，需要帮助。

Answer 1

对我来说似乎是两个不同的错误...

错误1：找不到图容器

签出此线程，因为问题听起来是一样的：

morris.js找不到图容器元素

错误2：无法读取属性“ getContext”

这看起来像一条红鲱鱼。 morris.js不会抛出此异常，而chartjs会抛出此异常。 但是，此代码引发的异常可能会阻止morris.js代码成功执行。 因此，值得单独测试代码，即加载一个视图，除了所需的morris脚本/资产和内联脚本外，不加载任何视图。 没有其他脚本或JavaScript库。 像这样的东西：

示例测试视图

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

</head>
<body>

<div id="mychart"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
    $(document).ready(function () {
        $.getJSON("/Supernethome/BarChart", function (data) {
                new Morris.Area({
                element: 'mychart',
                data: data,
                xkey: 'X',
                ykeys: ['Y'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true
            });

        });

    });
</script>

</body>
</html>

通过控制器MVC传递数据的Chart.js图表

问题描述

1 个解决方案

解决方案1
1 2018-08-21 12:10:46

通过控制器MVC传递数据的Chart.js图表

问题描述

1 个解决方案

解决方案1 1 2018-08-21 12:10:46

解决方案1
1 2018-08-21 12:10:46