zoukankan      html  css  js  c++  java
  • HighChat 动态绑定数据(二)

    也是对最近几天的折线图搞得烦心,看了好多前辈的文章,也总结了一下。

    1.先看后台程序,这是我模拟的一些参数 就是一个字符串。没啥好说的

     public ActionResult Index2()
            {
                string[] key = { "2017-08-01", "2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", "2017-08-09", "2017-08-10" };
                double[] V1 = { 4.3, 1.2, 1.3, 1.6, 7.6, 5.9, 9.0, 22, 10, 11 };
                double[] V2 = { 5.3, 1.9, 1.3, 1.4, 7.6, 0.4, 9.0, 22, 14, 12 };
                string json = "{"rows":[";
                for (int i = 0; i < key.Count(); i++)
                {
                    json += "{"atrname":"" + key[i] + "","clickvalue":"" + V1[i] + "","impvalue":"" + V2[i] + ""},";
                }
                json = json.TrimEnd(',');
                json += "]}";
                return Content(json);
            }

    2.主要是前台的数据绑定

     第一种方式:

      1.其中头文件中加了 no-data-to-display.src.js  这个文件,表示如果在没有数据的时候会自动显示  暂无数据

      lang: { noData: "暂无数据" },
      legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
           }

    2.请注意看现在的
    series: [{}] 的值是这样的,因为如果是[],这样就不会有数据显示 用这种方式显示数据的时候
    //这种方式必须默认有数据的时候才能显示
     oOptions.series[0].name = "第三条";
     oOptions.series[0].data = clickvalue;
    3.
    var oSeries = {
                    //    name: "第二条",
                    //    data: clickvalue
                    //};
                    //oChart.addSeries(oSeries);

    用这种方式 赋值的时候 series: [{}] 这样的时候,虽然显示一条折线图,但是右边会显示一个折线的表示。series:[] 这样就不会显示
    用这种方式赋值的时候
    //oChart = new Highcharts.Chart(oOptions); 要去掉 或者 放到上面执行。
    4.第三种方式 series:[] 或者series:[{}]都可以实现

        

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/charts/highcharts/exporting.js"></script>
        <script src="~/charts/highcharts/highcharts.js"></script>
        <script src="~/charts/highcharts/no-data-to-display.src.js"></script>
        <script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div id="container">
    
        </div>
    </body>
    </html>
    <script type="text/javascript">
        var oChart = null;
        var oOptions = {
            chart: {
                renderTo: 'container', //设置显示的页面块
                type: 'line'
            },
            //图标标题
            title: {},
            credits: { enabled: false },
            tooltip: { shared: true },
            lang: { noData: "暂无数据" },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            //x轴
            xAxis: { title: {} },
            //y轴
            yAxis: { title: {} },
            //数据列
            series: []
        };
        $(document).ready(function () {
            oChart = new Highcharts.Chart(oOptions);
            requestData();
        });
        //新的折线图
        function requestData() {
            oChart.showLoading();
            $.ajax({
                url: '/Home/Index2',
                type: 'POST',
                dataType: 'json',
                async: false, //同步处理后面才能处理新添加的series
                data: null,
                success: function (rntData) {
                    var xatrnames = [];
                    var clickvalue = [];
                    var impvalue = [];
                    for (var i = 0; i < rntData.rows.length; i++) {
                        xatrnames.push([
                          rntData.rows[i].atrname
                        ]);
                        clickvalue.push([
                          parseFloat(rntData.rows[i].clickvalue)
                        ]);
                        impvalue.push([
                         parseFloat(rntData.rows[i].impvalue)
                        ]);
                    }
                    alert(xatrnames + clickvalue);
                    oOptions.title.text = "标题";
                    oOptions.xAxis.title.text = "x轴标题";
                    oOptions.xAxis.categories = xatrnames;//x轴数据
    
                    //这种方式必须默认有数据的时候才能显示
                    oOptions.series[0].name = "第三条";
                    oOptions.series[0].data = clickvalue;
                    //必须有2条线的时候才会显示
                    oOptions.series[1].name = "第三条";
                    oOptions.series[1].data = clickvalue;
    
                    //这种方式为添加,每次只能添加一条
                    //var oSeries = {
                    //    name: "第二条",
                    //    data: clickvalue
                    //};
                    //oChart.addSeries(oSeries);
    
    
                    //此处可以用循环写入也可以的 循环赋值多个可以从0开始
                    //oOptions.series = new Array();
                    //oOptions.series[0] = new Object();
                    //oOptions.series[0].name = "点击";
                    //oOptions.series[0].data = clickvalue;
    
                    //oOptions.series[1] = new Object();
                    //oOptions.series[1].name = "展示";
                    //oOptions.series[1].data = impvalue;
    
    
                    //第二种方式的时候要去掉,或者放到上面先执行
                    //oChart = new Highcharts.Chart(oOptions);
                }, error: function (jqXHR, textStatus, errorThrown) {
    
                }
            });
            oChart.hideLoading();
        }
    
    
    </script>

     后面我会把我的demo放上去 希望有错误的地方大家可以指正我,共同进步

    下载链接:http://pan.baidu.com/s/1jHYFjE2

     
  • 相关阅读:
    软件測试培训笔记
    spring test---測试SpringMvc初识
    第1章第3节 线性表的比較
    Remove Duplicates from Sorted List leetcode
    泛型
    我的改进版2048(1)
    docker镜像和加速
    在 Azure Web 应用中创建 PHP 应用程序
    使用 Azure 门户创建 Windows 虚拟机
    使用 Azure 门户创建 Linux 虚拟机
  • 原文地址:https://www.cnblogs.com/elsons/p/7271371.html
Copyright © 2011-2022 走看看