如何在我的aspx页面中编写此highchart代码

时间:2019-07-03 02:27:33

标签: c# asp.net highcharts asp.net-ajax dotnethighcharts

这些代码是用mvc编写的。如何在aspx页面中编写这些代码?

这些为我的家庭控制器编码

{
    public class HomeController : Controller
    {


        public ActionResult GetData()
        {
            NORTHWNDEntities context = new NORTHWNDEntities();

            var query = context.Order_Details.Include("Product")
                 .GroupBy(p => p.Product.ProductName)
                 .Select(g => new { name = g.Key, count = g.Sum(w => w.Quantity) }).ToList();
            return Json(query, JsonRequestBehavior.AllowGet);
        }


    }
}

这些编码了我的index.cshtml页面

 ViewBag.Title = "Home Page";
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>

 $(document).ready(function () {
     $.getJSON("/Home/GetData", function (data) {
         var Names = []
         var Qts = []

         for (var i = 0; i < data.length; i++)
         {
             Names.push(data[i].name);
             Qts.push(data[i].count);

         }



         Highcharts.chart('container', {
             chart: {
                 type: 'line'
             },
             title: {
                 text: 'Monthly Average Temperature'
             },
             subtitle: {
                 text: 'Source: WorldClimate.com'
             },
             xAxis: {
                 categories: Names
             },
             yAxis: {
                 title: {
                     text: 'Temperature (°C)'
                 }
             },
             plotOptions: {
                 line: {
                     dataLabels: {
                         enabled: true
                     },
                     enableMouseTracking: false
                 }
             },
             series: [{
                 name: 'Trend',
                 data: Qts

             }]
         });

     }); 



 });

这些代码正在工作。我已经用aspx尝试了它们,但是我认为转换json数据时遇到麻烦。 您能给我展示一个很好的资源来学习asp.net中的图表吗?

0 个答案:

没有答案