Jquery Highcharts插件动态加载数据

.Net技术 码拜 9年前 (2015-03-05) 1919次浏览 0个评论

Jquery Highcharts插件动态加载数据 请问下大家categories怎么用ajax动态加载数据 下面是我写的数据能拿到就是Y轴显示的时候没有数据 
pre class=”brush: javascript”>
$(function () {
        var item; 
        $.ajax({
            type: “post”,
            url: “/Monitor/Day/”, 
            success: function (data) {
                if (data != “”) {
                    item = data.split(“,”);
                    alert(item);
                    //chart.xAxis.categories = [item];
                    //alert(chart.xAxis.categories); 
                }
            }
        });
        var chart = Highcharts.Chart({
            chart: {
                renderTo: “container”,
                type: “column”
            },
            title: {
                text: “Used Space C,D,E,F:Lable Data”
            },
            subtitle: {
                text: “Source: WorldClimate.com”
            },
            xAxis: {
                categories: item
                //[“Jan”, “Feb”, “Mar”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”]
            },
            yAxis: {
                min: 0,
                title: {
                    text: “Rainfall (mm)”
                }
            },
            tooltip: {
                headerFormat: “<span style=”font-size:10px”>{point.key}</span><table>”,
                pointFormat: “<tr><td style=”color:{series.color};padding:0″>{series.name}: </td>” +
                    “<td style=”padding:0″><b>{point.y:.1f} mm</b></td></tr>”,
                footerFormat: “</table>”,
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: “Tokyo”,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }, {
                name: “New York”,
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }, {
                name: “London”,
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
            }, {
                name: “Berlin”,
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
            }]
        });
    });

下面是我的控制器代码

  [HttpPost]
        public string Day()
        {
            string dayTime = string.Empty;
            DateTime dt = DateTime.Now;
            for (int i = 0; i < 31; i++)
            {
                DateTime localtime = dt.AddDays(i);
                dayTime += localtime.Day.ToString() + ",";
            }
            StringBuilder str = new StringBuilder();
            string[] sss = dayTime.Split(",".ToArray(), StringSplitOptions.RemoveEmptyEntries);
            for (int i = 0; i < sss.Length; i++)
            {
                str.Append(""");
                str.Append(sss[i]);
                str.Append(""");
                str.Append(",");
            }
            string value = str.ToString().TrimEnd(",");
            return value;
        }
 
Jquery Highcharts插件动态加载数据
前台没必要差分成数组,后台返回的string可以这样写
pre class=”brush: csharp”>string value = “[” + str.ToString().TrimEnd(“,”) + “]”;
前台:
pre class=”brush: javascript”> xAxis: {
                categories: eval(item)
            }
Jquery Highcharts插件动态加载数据
40分
MVC你也可以用ViewBag啊,在Controller返回视图前,定义ViewBag.Days=….
然后categories: eval(“@ViewBag.Days”) 
Jquery Highcharts插件动态加载数据
这个要做成无刷新的
Jquery Highcharts插件动态加载数据
引用 4 楼 lyc0884 的回复:

这个要做成无刷新的

你的构造图表的chart方法要放在ajax的success方法里面去啊,数据还没返回你怎么构造图表呢

Jquery Highcharts插件动态加载数据
我也遇到了,这样一个一个的赋值一遍,再用就可以了。
               var cname = eval(strs[1].split(“,”));
                for (var i = 0; i < cname.length; i++) {
                    cname[i] = eval(cname[i]);
                }

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Jquery Highcharts插件动态加载数据
喜欢 (0)
[1034331897@qq.com]
分享 (0)

文章评论已关闭!