`
knight_black_bob
  • 浏览: 858434 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

highcharts 使用

    博客分类:
  • js
阅读更多

highcharts 使用

 

 

 



 

 


       

  $.getJSON(url,function(jsonObject){
               chart = new Highcharts.Chart({ //HighCharts核心方法
                chart: {
                 renderTo: renderId,   //放置图标的容器(DIV)
                 defaultSeriesType: 'line', //折线图
                 zoomType: 'x',
                 backgroundColor: jsonObject.backgroundColor
                },
                credits: {             
                 enabled: false   //右下角不显示LOGO         
                }, 
                title: {
                          text: jsonObject.title,
                          style: {
                           font: '16px "Microsoft YaHei"',
                           color: '#393942'
                          }
                      },
                   xAxis: {  //X轴
                    categories: eval("(" + jsonObject.categories + ")"),
                       labels: eval("(" + jsonObject.xAxis_labels + ")")
                   },
                   yAxis: {
                       max: jsonObject.y_axis_max,
                 min: jsonObject.y_axis_min,
                 allowDecimals:false,
                          title: {
                              text: ''
                          }
                      },
                      tooltip: {
                          headerFormat: '<span style="font-size:12px">{point.key}</span><table>',
                          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                          footerFormat: '</table>',
                          shared: true,
                          useHTML: true,
                          borderColor: '#4BA9DF'
                      },
                      exporting: {             
                    enabled: false  //设置导出按钮不可用         
                   },
                   legend: {
                          enabled: true,
                          symbolWidth: 5,
                          borderWidth: 0
                   },
                   series: eval("(" + jsonObject.series + ")")
               });
              });

 

JSONObject jsonObject = new JSONObject();
try {
int step = 1;
JSONArray jsonArray = new JSONArray();
for (int i = showDataNum; i > 0; i--) {
jsonArray.put(DateUtils.formatDate(DateUtils
.getStringByBefore(i)));
}
jsonObject.put("categories", jsonArray.toString());
jsonObject
.append("series",
"[{name:'新增用户',color: '#4BA9DF',data: [1,2,3,4,5,6,5]}]");
jsonObject.append("xAxis_labels", "{step:" + step + "}");
jsonObject.append("title", "目前没有有效数据产生");
jsonObject.append("backgroundColor", "#ebebeb");
} catch (JSONException e) {
	e.printStackTrace();
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

捐助开发者

在兴趣的驱动下,写一个免费的东西,有欣喜,也还有汗水,希望你喜欢我的作品,同时也能支持一下。 当然,有钱捧个钱场(右上角的爱心标志,支持支付宝和PayPal捐助),没钱捧个人场,谢谢各位。



 
 
 谢谢您的赞助,我会做的更好!

 

 

  • 大小: 59.2 KB
分享到:
评论

相关推荐

    Highcharts使用说明中文WORD版

    资源名称:Highcharts使用说明 中文WORD版内容简介:Highcharts是一个跨浏览器的Javascript图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能,只需要...

    HighCharts 使用案例代码

    这个“HighCharts使用案例代码”压缩包显然是一个包含具体示例的资源集合,对于学习和理解如何在实际项目中应用HighCharts非常有帮助。 首先,HighCharts的基本使用步骤包括以下几点: 1. **引入HighCharts库**:...

    highcharts使用

    【标题】:“Highcharts使用” 在网页数据可视化领域,Highcharts是一个非常受欢迎的JavaScript库,它使得创建交互式图表变得简单高效。Highcharts以其丰富的图表类型、高度自定义的选项和出色的性能,广泛应用于...

    highcharts使用说明及demo

    以下是对`highcharts使用说明及demo`的详细解读: 1. **基本配置**:在使用Highcharts时,首先需要在HTML文件中引入Highcharts的JavaScript库。通常,这可以通过在`&lt;head&gt;`标签内添加链接到Highcharts CDN的`...

    Highcharts使用说明

    Highcharts使用说明 Highcharts是基于JavaScript的图表库,主要用于在Web页面上显示各种类型的图表,如线状图、柱状图、饼状图等。Highcharts库提供了非常灵活的配置选项,使得开发者可以根据需要自定义图表的样式...

    Highcharts使用手册

    完整的Highcharts使用手册,有丰富的实例,可以直接复制使用

    Highcharts使用说明中文最新版本

    Highcharts是一个跨浏览器的JavaScript图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能,只需要引入两个JS类库即可,一个是jquery类库,另外一个就是它本身...

    网页图表Highcharts实践教程基础篇

    网页图表Highcharts实践教程基础篇主要涵盖了如何使用Highcharts库创建和定制各种图表,以便在网页上呈现数据。Highcharts是一款强大的JavaScript库,专为Web开发者设计,用于生成高质量的数据可视化图表。它支持...

    highcharts的使用

    默认情况下,Highcharts使用`Exports.highcharts.com`进行图片导出。如果需要自定义导出服务器,需要修改`exporting.url`属性,指向自己的导出服务接口。此外,为了防止中文乱码问题,可能还需要对导出过程进行特殊...

    highcharts图形报表使用说明

    以下是对Highcharts图形报表的使用说明和关键知识点的详细解释: 1. **引入依赖库**: 在使用Highcharts之前,首先需要引入必要的JavaScript库。`jquery.js`是jQuery框架,Highcharts是基于jQuery构建的,因此需要...

    Highcharts使用教程(1):制作简单图表

    在本教程中,我们将学习如何使用Highcharts制作一个简单的柱状图。首先,确保你已经正确地安装了Highcharts库,这是开始创建图表的前提。 **步骤一:创建HTML容器** 在HTML文档中,我们需要添加一个`div`元素作为...

    highcharts案例,附js,可以直接使用

    这个压缩包包含了一系列的Highcharts使用案例,对于前端开发者来说,是非常宝贵的参考资料。 首先,我们来详细了解Highcharts的基本概念。Highcharts是一个基于纯JavaScript的开源图表库,它可以方便地与HTML5和SVG...

    highcharts.js使用说明

    **Highcharts.js 使用详解** Highcharts.js 是一个流行的JavaScript...通过阅读《Highcharts使用说明.doc》文档,你将能深入理解Highcharts的各个方面,从基本用法到高级功能,帮助你更好地利用这个库进行数据可视化。

    Highcharts使用教程

    本教程将聚焦于如何使用Highcharts结合AJAX技术,实现图表数据的远程加载,从而达到无刷新更新图表的效果。 首先,我们需要理解Highcharts的基本结构。Highcharts的核心是`Highcharts.Chart`对象,通过这个对象我们...

    Highcharts框架js包

    4. **gfx** - 这个目录可能存储了Highcharts使用的图形资源,如图标或者默认的符号,这些资源可以用于自定义图表的外观。 5. **api** - 这部分通常包含Highcharts的API文档,它详尽地解释了各种选项、方法和事件,...

    highcharts客户端导出

    在默认情况下,Highcharts使用一个基于服务器的导出服务,将图表转换为图像或PDF。然而,"客户端导出"功能消除了对服务器的依赖,所有处理都在用户的浏览器内部完成。这减少了网络延迟,使得导出过程更加迅速,尤其...

    highcharts struts demo

    5. **传递数据**:使用OGNL从Action将数据传递到JSP页面,供Highcharts使用。 6. **测试与调试**:运行项目,验证图表的显示和交互效果是否符合预期。 通过"Highcharts Struts Demo",开发者可以学习到如何在Java ...

    报表 HighCharts

    ### 报表HighCharts使用教程 #### 一、HighCharts简介 HighCharts是一款非常流行的JavaScript图表库,它基于SVG(可缩放矢量图形),在旧版本浏览器中使用VML(Vector Markup Language)作为后备方案。HighCharts...

    highcharts官方文档

    Highcharts Standalone框架专为那些不在其网页中已经使用jQuery、MooTools或Prototype的用户设计,旨在减少使用Highcharts的额外负担。Highcharts和Highstock(另一个基于Highcharts的图表解决方案)在所有现代...

Global site tag (gtag.js) - Google Analytics