Highchart图形报表

最新推荐文章于 2018-01-07 20:01:49 发布

lideyuans

最新推荐文章于 2018-01-07 20:01:49 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/lideyuans/article/details/61918959

版权

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
    }]

});

});