首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

HightCharts绑定后台老板传过来的json数据

2013-08-13 
HightCharts绑定后台传过来的json数据网上看到的大多是静态的数据,所以只写如何绑定后台传过来的数据。代码

HightCharts绑定后台传过来的json数据
   网上看到的大多是静态的数据,所以只写如何绑定后台传过来的数据。
   代码如下:
    $(document).ready(function () {
           //先把图表的参数定义好。
            var options = {
                chart: {
                    renderTo: 'containArea', //图表放入的容器ID  
                    type: 'line'  //图表类型 此处是拆线图
                },
                xAxis: {
                    categories: ['周一','周二','周三','周四'] //横坐标数据点文字  也可动态赋值,变量格式为['',''...]   
                },
                yAxis: {
                    title: {
                        text: '.c'//Y坐标说明
                    },
                    labels: {
                        formatter: function () {
                            return this.value + '.C' //纵坐标数据格式。
                        }
                    }
                },
                series: [{ name: '最低气温' }, { name: '最高气温' }],   //此处定义两个series,即两条线,最高气温和最低气温,如果更多则在里面添加大括号。


              
                legend: {
                    enabled:'false'  //此处具体不清楚是干嘛的。
                },
                credits: {
                    enable: 'false',   //版权信息  右下角的链接。右上角的chart context menu还没找到如何去掉。
                    text:' ',
                href:' '
                }
            };
            //下面是获取数据及绑定的方法
            $.getJSON("Handler1.ashx", function (data) {   //请求的地址和回掉函数。
//注意:后台的json或json数组格式一定要正确,否则进不了回调函数。
//我后台传回的数据格式为:[[1,2,3,4],[5,6,7,8]]  是我自己拼成的json字符串,并不是把数据序列成json。                                     

                options.series[0].data = data[0];  //最低气温的图表线 绑定 
                options.series[1].data = data[1];   //最高气温的图表线 绑定
                var chart = new Highcharts.Chart(options); //用前面定义的参数构造一个图表,会自动填充到页面容器中。
            })
            
        })
比较简单,希望能帮到有需要的人。 HighCharts 动态数据 highcharts绑定数据 后台数据 highcharts?json

分享到:
[解决办法]
不加载exporting.js右上角的菜单就不会出来了
legend是图例

热点排行