HighChat 动态绑定数据（2）

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

HighChat 动态绑定数据（2）

相关推荐