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使用教程

"> My JSP 'MyJsp.j
  • wangjinwei6912
  • wangjinwei6912
  • 2014年05月18日 14:30
  • 5440

highCharts实际运用的问题集锦

1.   highCharts 无数据时显示: 红色部分为主要设置: $(divId).highcharts({ title : { text : '' ...
  • yibing548
  • yibing548
  • 2015年05月26日 16:06
  • 1127

Highcharts用法简单说明

Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表。 其...
  • lumengabc
  • lumengabc
  • 2013年12月09日 10:58
  • 1122

[Highcharts] 初识Highcharts 饼状图示例

简介: HighCharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用...
  • qq_14852397
  • qq_14852397
  • 2016年09月29日 11:57
  • 1155

HighCharts使用心得

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

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

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

动态更新highcharts数据

var chart ; $(function (){ chart = new Highcharts.Chart({ ...
  • danielinbiti
  • danielinbiti
  • 2015年08月01日 17:40
  • 4192

highcharts画阶梯图线(Step)阶跃信号之类

转自http://blog.sina.com.cn/s/blog_6a5359910101a3sk.html $(function () { $('#container').hi...
  • dusea
  • dusea
  • 2015年10月10日 10:00
  • 1707

C++的一些基本用法

这篇博客可能不是像通常的编程书籍一样,从“hello world”进行一个可视化的一个例程,主要就是对一些C++的特性,包括关键字的一些理解,也是用到一个整理一个,所以逻辑性和连贯性可能不是很好,纯粹...
  • Felaim
  • Felaim
  • 2017年08月10日 12:51
  • 214

highCharts(一)Highcharts 基本组成

Highcharts基本组成 名词解释 lang:语言文字对象,所有Highcharts文字相关的设置 chart:图表区、图形区和通用图表配置选项 colors:图表数据列颜色配置,是...
  • u014744118
  • u014744118
  • 2017年05月17日 16:02
  • 105
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Highcharts基本用法
举报原因:
原因补充:

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