【HighCharts系列教程】三、图表属性——chart

一、chart属性说明

Chart是HighCharts图表中主要属性,包括了图表区域的颜色、线条、高度、宽度、对齐、图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一。

配置chart属性,你可以轻松改变你的图表的样式、外观。

二、chart属性详解

Chart常用属性如下表

参数 描述 默认值
backgroundColor 设置图表区背景色 #FFFFFF
borderWidth 设置图表边框宽度 0
borderRadius 设置图表边框圆角角度 5
renderTo 图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值 null
defaultSeriesType 默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter
0
width 图表宽度,默认根据图表容器自适应宽度 null
height 图表高度,默认根据图表容器自适应高度 null
margin 设置图表与其他元素之间的间距,数组,如[0,0,0,0] [null]
plotBackgroundColor 主图表区背景色,即X轴与Y轴围成的区域的背景色 null
plotBorderColor 主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色 null
plotBorderWidth 主图表区边框的宽度 0
shadow 是否设置阴影,需要设置背景色backgroundColor false
reflow 是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小 true
zoomType 拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,‘y’,‘xy’
events 事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数  

chart属性下还有更多不常用的配置,可以参考API文档进行详细设置。

三、效果截图

四、实例说明

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                //HighCharts中chart属性配置
                  chart: {
                    renderTo: ‘container‘,//div 标签
                    type: ‘line‘,//图表类型

                    /******************以下chart配置可选******************/
                    backgroundColor:"#EAF7FF",//图表背景色
                    borderWidth:5,//图表边框宽度
                    borderRadius:15,//图表边框圆角角度
                    plotBackgroundColor:"#6DBFBB",//主图表区背景颜色
                    plotBorderColor:‘red‘,//主图表边框颜色
                    plotBorderWidth:2,//主图表边框宽度
                    shadow:true,//是否设置阴影
                    zoomType:‘xy‘//拖动鼠标放大图表的方向
                  },
                  credits : {
                    href:‘http://www.52wulian.org‘,
                    position: {
                        x:-30,
                        y:-30
                    },
                    style:{
                        color:‘red‘,
                        fontWeight:‘bold‘
                    },
                    text:‘我爱物联网‘
                  },
                  xAxis: {
                    categories: [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘]
                  },
                  series: [{
                        name: ‘series1‘,
                        data: [2,4,5,9,2]
                   }]
                });
            });
        });
        </script>
    </head>
    <body>
        <script src="js/highcharts.js"></script>
        <script src="js/exporting.js"></script>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    </body>
</html>

五、在线演示

演示地址:http://www.52wulian.org/test/HighCharts/highcharts_2_1_chart.html

六、源码下载

下载地址:http://pan.baidu.com/share/link?shareid=206384&uk=3087605183

时间: 2024-10-31 15:08:08

【HighCharts系列教程】三、图表属性——chart的相关文章

网页图表Highcharts实践教程之图表区

网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细讲解图表区的设置和创建. 网页图表Highcharts图表区的构成 为了方便管理,Highcharts将所有的图表元素都绘制在一个Box区域内,如图2.1所示.这个区域被称为图表区.由于图表中最重要的数据就是图表图形,所以图表图形所在的区域又构成一个独立的区域,称为绘图区,如图2.1所示. 图2

struts2 官方系列教程三:使用struts2 标签 tag

避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本教材假定你已完成了HelloWorld项目,你可以在 struts2 官方系列教程三:使用struts2 标签 tag 下载本章节的代码 在上一节教程中,我们在index.jsp中使用 url tag 创建了一个超链接hello.action 这节我们将探索struts2中其它tags Web应用程

CRL快速开发框架系列教程三(更新数据)

本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框架系列教程四(删除数据) CRL快速开发框架系列教程五(使用缓存) CRL快速开发框架系列教程六(分布式缓存解决方案) CRL快速开发框架系列教程七(使用事务) CRL快速开发框架系列教程八(使用CRL.Package) CRL快速开发框架系列教程九(导入/导出数据) CRL快速开发框架系列教程十(

网页图表Highcharts实践教程之图表代码构成

网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如下: (1)新建一个网页文件,命名为Hello.html.同时,将title设置为Hello Highcharts.代码如下: <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>

【HighCharts系列教程】一、认识Highcharts

一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的类型有:曲线图.柱状图.饼状图.区域图.散点图.综合图的各种图表需求.最新版2.3.5(截止2013/1/10)增加了各种仪表.时钟等类型图表 说了这么多,总之就是一句话,如果你有图表需求,选择HighCharts吧! 二.如何学习HighCharts 修改HighCharts自带的例子 了解Hig

kubernetes系列教程(三)kubernetes快速入门

写在前面 kubernetes中涉及很多概念,包含云生态社区中各类技术,学习成本比较高,k8s中通常以编写yaml文件完成资源的部署,对于较多入门的人来说是个较高的门坎,本文以命令行的形式代理大家快速入门,俯瞰kubernetes核心概念,快速入门. 1. 基础概念 1.1 集群与节点 kubernetes是一个开源的容器引擎管理平台,实现容器化应用的自动化部署,任务调度,弹性伸缩,负载均衡等功能,cluster是由master和node两种角色组成,其中master负责管理集群,master节

Android视频录制从不入门到入门系列教程(三)————视频方向

运行Android视频录制从不入门到入门系列教程(二)————显示视频图像中的Demo后,我们应该能发现视频的方向是错误的. 由于Android中,Camera给我们的视频图片的原始方向是下图这个样子的: 就是说,即使你是竖着拿手机的,Camera提供给你的视频图像的方向还是上图那样横着的图片. 我们可以通过下述方向改变Camera提供的视频图像的方法: camera.setDisplayOrientation(90); 让图像顺时针旋转90度,视频图像的方向就正常的. 本篇文章DEMO下载.

C#微信公众号开发系列教程三(消息体签名及加解密)

  C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南)    距离上一篇博文已经半个月了,本来打算每两天更新一次的,但可怜苦逼码农无日无夜的加班.第一篇博文发表后,博文视点的编辑就找到我,问我想不想出版这个系列,我当时瞬间就想到了王大锤的独白,想想真的是有点小激动,后面按照那边的要求,提交了申请书,也提交了目录,可惜文笔不行,再加上最近太忙,样稿一直没有给他,感觉挺愧疚了.真心希望能帮一下迷茫的

Influx Sql系列教程三:measurement 表

在influxdb中measurement相当于mysql中的表,可以理解为一条一条记录都是存与measurent中的,一个数据库中可以有多个measurement,一个measurement中可以存很多的数据.虽然可将measurement类比为mysql中的表,但是他们之间的差别也挺明显的 首先我们先了解一下measurement的几个常用命令,如何查看.新增删除 1. show measurements 查看一个数据库中有哪些measurement,属于常规操作了 先确定数据库 执行sho