您的位置：首页 > 其它

Highchart图形报表

2017-03-13 15:37 330 查看
http://www.highcharts.com/demo/

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chart-update.aspx.cs" Inherits="AngularJS.Chart_update" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chart-update</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container"></div>
<%--  <button id="plain">Plain</button>
<button id="inverted">Inverted</button>
<button id="polar">Polar</button>--%>
</div>
</form>
<script>
var chart = Highcharts.chart('container', {

title: {
text: 'Chart.update'
},

subtitle: {
text: 'Plain'
},

xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
type: 'column',
colorByPoint: true,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
showInLegend: false
}]

});

//$('#plain').click(function () {
//    chart.update({
//        chart: {
//            inverted: false,
//            polar: false
//        },
//        subtitle: {
//            text: 'Plain'
//        }
//    });
//});

//$('#inverted').click(function () {
//    chart.update({
//        chart: {
//            inverted: true,
//            polar: false
//        },
//        subtitle: {
//            text: 'Inverted'
//        }
//    });
//});

//$('#polar').click(function () {
//    chart.update({
//        chart: {
//            inverted: false,
//            polar: true
//        },
//        subtitle: {
//            text: 'Polar'
//        }
//    });
//});

</script>
</body>
</html>
//data可以直接绑定返回的数组
//如下所示
var item_subno = [];
var price = [];

var dataService = {
ID: "ID", //查询-返回实体值.ds
Args: {

}
};
Service.Core.executeDataService(dataService, function(ret) {
//console.log(ret); //F12打开开发者工具，在控制台中就可以查看
//Common.Dialog.alertDetail(ret);
if(ret.length > 0) {
for(var i = 0; i < ret.length; i++) {
item_subno.push(ret[i].item_subno);
price.push(ret[i].price);
}
}

var chart = Highcharts.chart('container', {

title: {
text: 'Chart.update'
},

subtitle: {
text: 'Plain'
},

xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

series: [{
type: 'column',
colorByPoint: true,
data:price,//[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
showInLegend: false
}]

});

});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航