图形化动态生成报表

@{
    ViewBag.Title = "Index";
}
<script src="~/Content/jquery-1.9.1.min.js"></script>
<script src="~/Content/highcharts/js/highcharts.js"></script>
<script src="~/Content/highcharts/js/themes/grid.js"></script>
<script type="text/javascript">
    Highcharts.setOptions({
        colors: ["#ffabcd", "#abcdff", "#aacc66"]
        , global: {
            useUTC: false
        }
    });
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'//spline ——— 样条曲线  column ————柱型    pie --- 饼   line  ---线状  area -- 区域图
                //areaspline ---  面积样条曲线   bar  --- 两边展开   scatter ---- 点型
                , events: {
                    load: function () {

                        var ser = this.series[0];

                        var poi = 12;
                        setInterval(function () {

                            ser.addPoint([new Date().getTime() + 11 * 1000, Math.random() * 10], true, true);
                            poi++;
                        }, 1000);

                    }

                }
            },
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                //    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true


                    },
                    enableMouseTracking: false

                }

            },
            series: [{
                name: '心电图',
                data: function () {
                    alert(111)
                    var data = [];
                    var dt = new Date();
                    for (var i = 0; i < 12; i++) {

                        data.push({ x: dt.getTime() + 1000 * i, y: Math.random() * 10 });
                        console.log(dt.getTime() + 1000 * i)

                    }
                    console.log(data);
                    return data;
                }()
            }]
        });
    });


</script>

<body>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>

效果如下:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美,让我痴迷

你的好,我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值