zoukankan      html  css  js  c++  java
  • Asp.net mvc4 + HighCharts + 曲线图

    前端代码:

    @{
    Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <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">
    var dataTmp = "";
    $(function () {
    GetseriesValue(); //获取数据源信息
    });

    //获取数据源信息
    function GetseriesValue() {

    var DropCustomerName = $("#DropCustomerName").val(); //获取客户名称

    $.ajax({
    type: "post",
    url: "../Home/ViewCurve",
    //data: { method: "mlqtylist", DropCustomerName: DropCustomerName },
    dataType: "json",
    //cache: false,
    success: function (result) {
    dataTmp = "";
    for (var i = 0; i < result.length; i++)
    {
    //拼接json数据集字符串
    dataTmp += "{name: '" + result[i].address + "',data: [" + result[i].Jan + ", " + result[i].Feb + ", " + result[i].Mar + "]}" + ",";
    }
    //$.each(result, function (i, field) {
    // ;
    // //拼接json数据集字符串
    // dataTmp += "{name: '" + field.address + "',data: [" + field.Jan + ", " + field.Feb + ", " + field.Mar + "]}" + ",";
    //});
    //去除最后一个字符
    dataTmp = dataTmp.substring(0, dataTmp.length - 1);
    GetData(dataTmp);
    },
    error: function () {
    alert("请求超时,请重试!");
    }
    });
    };

    //绑定获取数据信息操作
    function GetData(dataTmp) {

    //绑定数据信息
    $('#container').highcharts({
    chart: {
    backgroundColor: {
    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
    stops: [
    [0, 'rgb(255, 255, 255)'],
    [1, 'rgb(240, 240, 255)']
    ]
    },
    borderWidth: 2,
    plotBackgroundColor: 'rgba(255, 255, 255, .9)',
    plotShadow: true,
    plotBorderWidth: 1
    },
    title: {
    text: 'Monthly Total Information ',
    x: -20
    },
    subtitle: {
    text: 'Source: winnaodan.net',
    x: -20
    },
    lang: {
    printChart: '打印图表',
    downloadPNG: '下载JPEG 图片',
    downloadJPEG: '下载JPEG文档',
    downloadPDF: '下载PDF 文件',
    downloadSVG: '下载SVG 矢量图',
    contextButtonTitle: '下载图片'
    },
    xAxis: {
    gridLineWidth: 1,
    lineColor: '#000',
    tickColor: '#000',
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
    minorTickInterval: 'auto',
    lineColor: '#000',
    lineWidth: 1,
    tickWidth: 1,
    tickColor: '#000',
    min: 0,
    labels: {
    formatter: function () { //设置纵坐标值的样式
    return this.value + '/Qty';
    }
    },
    title: {
    text: 'Total Analyze (Qty)'
    },
    plotLines: [{
    value: 0,
    1,
    color: '#808080'
    }]
    },
    tooltip: {
    formatter: function () {
    return '<b>' + this.series.name + '</b><br />' + this.x + ': ' + this.y + yAxisLabels;
    }
    },
    legend: {
    itemStyle: {
    font: '9pt Trebuchet MS, Verdana, sans-serif',
    color: 'black'
    },
    itemHoverStyle: {
    color: '#039'
    },
    itemHiddenStyle: {
    color: 'gray'
    },
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
    },
    series: eval("[" + dataTmp + "]") //获取数据源操作信息
    });
    }
    </script>

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

    Controller代码:

    zmTestEntities entity = new zmTestEntities();

    public ActionResult Curve()
    {
    return View();
    }

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

    艾豆社区、豆信框架、豆信开发手册
  • 相关阅读:
    函数的逻辑读成零
    SQL逻辑读变成零
    体系结构中共享池研究
    执行计划基础 动态采样
    执行计划基础 统计信息
    识别低效率的SQL语句
    oracle 知识
    XPATH 带命名空间数据的读取
    ACTIVITI 研究代码 之 模版模式
    ACTIVITI 源码研究之命令模式执行
  • 原文地址:https://www.cnblogs.com/zhoumeng780/p/4630571.html
Copyright © 2011-2022 走看看