HighChat 动态绑定数据(二)_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > HighChat 动态绑定数据(二)

HighChat 动态绑定数据(二)

 2017/8/2 2:38:55  今晚再打老虎  程序员俱乐部  我要评论(0)
  • 摘要:也是对最近几天的折线图搞得烦心,看了好多前辈的文章,也总结了一下。1.先看后台程序,这是我模拟的一些参数就是一个字符串。没啥好说的publicActionResultIndex2(){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
  • 标签:数据

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

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

 

 

 

 

发表评论
用户名: 匿名