zoukankan      html  css  js  c++  java
  • Asp.net mvc4 + HighCharts + 柱状图

    前端代码:

    @{
    Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
    <script type="text/javascript">

    $(function () {

    var values = "";
    var data1 = [];
    var months = [];
    //var a = [29.9, 71.5, 106.4, 129.2, 144]
    $.ajax({
    url: '../Home/ViewChart',
    type: 'post',
    dataType: "json",

    success: function (msg) {
    //var values = JSON.stringify(msg)
    //alert(msg.length)
    for (var i = 0; i < msg.length; i++) {
    //alert("123")
    //values += "11" + msg[i].tem + "11"
    //var a= values.push(bb[i].tem);
    data1.push(msg[i].tem)
    months.push(msg[i].months)
    }

    var chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container',
    type: 'column',
    margin: 75,
    options3d: {
    enabled: true,
    alpha: 15,
    beta: 15,
    depth: 50,
    viewDistance: 25
    }
    },
    title: {
    text: 'Chart rotation demo'
    },
    xAxis: {
    categories: months

    },
    yAxis: {
    min: 0,
    title: {
    text: 'id'
    }
    },
    subtitle: {
    text: 'Test options by dragging the sliders below'
    },
    plotOptions: {
    column: {
    depth: 25
    }
    },
    series: [{
    data: data1
    }]
    });

    }
    })
    });
    </script>
    <title>Index</title>
    </head>
    <body>
    <div id="container" style="min- 700px; height: 400px"></div>
    </body>
    </html>

    Controller代码:

    zmTestEntities entity = new zmTestEntities();

    //柱状
    public ActionResult Index()
    {
    return View();
    }

    public ActionResult ViewChart()
    {
    var q = (from h in entity.HighCharts select h).ToList();
    return Json(q, JsonRequestBehavior.AllowGet);
    }

    艾豆社区、豆信框架、豆信开发手册
  • 相关阅读:
    VSCode配置Python开发环境
    图像特征——边缘
    关于相机内参中的焦距fx和fy
    摄影变换和仿射变换
    为什么要引入齐次坐标
    链表一
    从小问题看懂链表
    类与对象
    排序一
    数组
  • 原文地址:https://www.cnblogs.com/zhoumeng780/p/4630564.html
Copyright © 2011-2022 走看看