Highcharts基本用法

最新推荐文章于 2025-06-05 14:27:22 发布

qq_27665781

最新推荐文章于 2025-06-05 14:27:22 发布

阅读量625

点赞数

CC 4.0 BY-SA版权

分类专栏： Html 前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_27665781/article/details/51556603

Html 前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用Highcharts实现的订单统计数据展示案例。该案例通过jQuery获取隐藏域中的数据，并将其用于图表的绘制，展示了不同类型的订单（如裸机数量、订单总量及合约机数量）在各月份的变化趋势。

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

* $(function () { //填充数据使用,使用jquery来获取隐藏域的值 var xAxisTimeInfo =$ (“#xAxisTime”).val();
var totalRecordInfo = $(“#totalRecord”).val(); var totalRecordHYInfo =$ (“#totalRecordHY”).val();
var totalRecordLJInfo = $(“#totalRecordLJ”).val();

    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: '每月订单数量统计'
        },
        subtitle: {
            text: ''
        },
    exporting:{
            filename:"订单统计", //下载显示的文件名称
            sourceWidth: 1000,     //下载图片的宽度
            sourceHeight: 550,  //下载图片的高度

//指定下载图片的url，这里使用的本地的java代码，没有使用官网的代码(那//样会受到highchart官网的网络限制,这里的java代码是结合的struts1来//实现的，在java代码解决了导出图片中中文乱码的问题以及下载文件名乱码//的问题,详见java代码中说明) url:’<%=basePath%>shop/newOrder/orderPre/exportImage.do’//这里是一个重点哦,也可以修改exporting.js中对应的url
},
/**
* 去掉图标的右下角HightCharts.com 的图标
*/
credits: {
enabled : false, //设置false就不会显示右下角的官网链接
//右下角连接的显示位置
position:{ align: ‘right’,x: -8, verticalAlign: ‘bottom’,y: -390 },
//右下角链接的地址href:’<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1’,
text:’区域图表’,//右下角连接的名字
style : {cursor:’pointer’,color:’#909090’,fontSize:’20px’}
},
xAxis: {
categories: eval(xAxisTimeInfo)

        },
        yAxis: {
            min: 0,
            title: {
                text: '单位  (个)'
            }
        },

//鼠标旁边的提示框的样式
//1. point.y:.0f 提示框中显示的y轴单位的小数点位数
//2. style=”width:160px;height:50px” 提示框的宽高
//3. point.key 坐标的x轴的值
tooltip: {
headerFormat: ‘{point.key}

’,
pointFormat: ‘’ +
‘’,
footerFormat: ‘

{series.name}:

{point.y:.0f}

’,
shared: true,
useHTML: true

        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },

//图例的显示名称和数据
//这里使用了eval函数处理一下，使用jquery获取到的隐藏域的值
//否则不会显示
series: [{
name: ‘裸机数量’,
data: eval(totalRecordLJInfo)

        }, {
            name: '订单总量',
            data: eval(totalRecordInfo)

        },  {
            name: '合约机数量',
            data: eval(totalRecordHYInfo)

        }]
    });

});*