Highcharts 统计报表的使用(曲线图)

最新推荐文章于 2016-12-15 15:04:41 发布

tyzshare

最新推荐文章于 2016-12-15 15:04:41 发布

阅读量664

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/u010796875/article/details/44747035

版权

本文介绍了如何在项目中使用Highcharts库创建曲线图进行统计报表展示。通过引入jQuery和Highcharts.js库，设置图表标题、子标题、轴标签、数据系列等属性，实现了包括多媒体技术和数据库设计在内的数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入两个js

$(function () {
    $('#container').highcharts({
        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']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

地址：http://www.hcharts.cn/index.php//

项目中我的使用：

视图：

@{
ViewBag.Title = "Index";
}
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/highcharts.js"></script>
<div id="container" style="min-width: 700px; height: 400px">
</div>
<script>

    $(function () {
        var v = $.post('/Highcharts/GetV', {}, function (data) {
            $('#container').highcharts({
                title: {
                    text: '人数统计报表',
                    x: -20 //center
                },
                subtitle: {
                    text: '统计',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Number of people (人)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '人'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: data
            });
        });
    });
</script>
控制器：

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult GetV()
        {
            var json = new JsonResult();
            List<Class> list = new List<Class>();
            Class T = new Class();
            T.name = "多媒体技术";
            T.data = new int[] { 10, 20, 18, 15, 13, 26, 23, 34, 57, 13, 17, 90 };
            Class V = new Class();
            V.name = "数据库设计";
            V.data = new int[] { 7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 10 };
            list.Add(T);
            list.Add(V);
            json.Data = list;
            return json;
        }