Highcharts基本用法

原创 2016年06月01日 15:49:23

*(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)

        }]
    });

});*

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HighCharts使用心得

HighCharts使用心得前言:之前很早的一个项目中使用过highcharts,感觉挺方便的,图表类型也比较丰富,而且还支持数据的下钻,但是如果投入商业使用的话还会有一些版权的问题,所以后来就使用了...
  • xuemoyao
  • xuemoyao
  • 2014年06月08日 23:42
  • 12878

jquery中的highcharts用法(统计图表)

var chart; chart = new Highcharts.Chart({ chart: { //整体控制 ren...

Highcharts基本曲线图

$(function(){ var title={ text:'城市平均气温' } var subtitle={ text:'纯属虚构' } var to...

新手学HighCharts(一)----基本使用

HighCharts简介    最近做的项目需要用到数据分析,图表显示,之前做项目的时候用到过highcharts,不过也只是简单的会用而已,然后再网上查了查highcharts的优点: High...

Highcharts基本柱图

Highcharts官网 http://www.highcharts.com/

highcharts--基本使用

  • 2013年04月24日 09:18
  • 1.16MB
  • 下载

highcharts--基本使用(API常用属性).doc

  • 2012年06月01日 08:46
  • 1.89MB
  • 下载

Highcharts饼图下钻式基本操作方法

话不多说先上官方手册 需要加载的几个JS 插件就不废话了 自己看官方事例 代码 官方demo 上我编译后的中文数据 javascript 代码 $(function () { Hi...

HighCharts基本使用实例(入门)

HighCharts 摘要 HighCharts是目前最为流行的图表插件,应用范围广泛,目前支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等,并且还支持一些拓展的特殊图表,如:仪表图、极...

highcharts图表高级入门之polar:极地图的基本配置以及一些关键配置说明(转载)

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。 1、需要设置chart的polar属性为true;以表示是极地图; 2、其他的设置和普通图表就没什么区别了的,这里附...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Highcharts基本用法
举报原因:
原因补充:

(最多只允许输入30个字)