highcharts 动态页面显示！

最新推荐文章于 2021-04-09 05:15:48 发布

Rundy_Deng

最新推荐文章于 2021-04-09 05:15:48 发布

阅读量740

点赞数 1

分类专栏： hightcharts 文章标签： highcharts javascript java

本文链接：https://blog.csdn.net/Rundy_Deng/article/details/77270841

版权

本文介绍如何在页面中运用Highcharts库进行动态数据显示。首先展示了用于展示图表的JavaScript代码，接着提供了一段JavaScript示例，详细解释了数据加载和更新的过程。最后，给出了后台Java代码片段，为前端图表提供数据支持，读者可以借此理解前后端数据交互的实现方式。

摘要由CSDN通过智能技术生成

1.页面JS：

<script type="text/javascript">
 
 
        $(function () {
    $('#container').highcharts({
        title: {
            text: '档案数量走势',
            x: -20 //center
        },
        subtitle: {
             
            x: -20
        },
        xAxis: {
            categories: []
        },
 
        yAxis: {
            title: {
                text: '单位 (条)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '条'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [ {
            name: '档案数量',
            data:########//这边我需要调用后台写好的JSON数据，这边应该怎么写
        }]
    });
});
 
        // Apply the theme
        var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
 
        //汉化图表菜单
        Highcharts.setOptions({
            lang: {
                contextButtonTitle: "图表菜单",
                printChart: "打印图片",
                downloadJPEG: "下载JPEG 图片",
                downloadPDF: "下载PDF文档",
                downloadPNG: "下载PNG 图片",
                downloadSVG: "下载SVG 矢量图",
                exportButtonTitle: "导出图片"
            }
        });
     
     
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <div id="container" style="min-width:400px;height:400px"></div>
    </form>
</body>

2. 显示结果：

3. 好，下一个吧，jS代码：

$('button').click(function(){
 
		var buttonname = $(this).val();
		var sDate=$("#input_sel_sdate").val();
		var eDate=$("#input_sel_edate").val();
		var sArr = sDate.split("-");
		var eArr = eDate.split("-");
		var sta_str = sArr[0]+"-10-15".split("-"); 
		var sta_date = new Date(sta_str[0], sta_str[1], sta_str[2]);
		var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
		var eRDate = new Date(e