一.chart的部分相关属性说明
    renderTo: 'container',      //图表的页面显示容器(也就是要显示到的div)

chart.events.addSeries:添加数列到图表中。

chart.events.click:整个图表的绘图区上所发生的点击事件。

chart.events.load:图表加载事件。

chart.polar:是否为极性图表。

chart.events.selection:当图表曲线可选择放大时,当选择图表操作时,可以触发该事件。

chart.type:图表的类型,默认为line,还有bar/column/pie……

defaultSeriesType: 'line',  //图表类型(line、spline、scatter、splinearea、bar、pie、area、column)
    marginRight: 50,            //上下左右空隙(图表跟图框之间)
    marginBottom: 60,           //下面空隙如果不够大,图例说明有可能看不到
    plotBackgroundImage: '../graphics/skies.jpg', //(图表的)背景图片
    plotBackgroundColor:        //背景颜色
    width: 1000,                //图框(最外层)宽(默认800)
    height: 500,                //图框高(默认500) 
    backgroundColor: "red"      //图框的背景颜色
    borderColor: "red"          //图框的边框颜色
    borderRadius: 5,            //图框的圆角大小
    borderWidth: 9,             //图框的边框大小
    inverted: false,            //(使图)倒置(图表中的x,y轴对换)
    plotBorderColor: "red",     //图表的边框颜色
    plotBorderWidth: 0,         //图表的边框大小
    plotShadow: false,          //图表是否使用阴影效果
 reflow:false/ture         //当窗口大小改变时,图表宽度自适应窗口大小改变。
    shadow:true                 //图框是否使用阴影
    showAxes: false,            //是否最初显示轴
    spacingTop: 100,            //图表上方的空白
    spacingRight: 10,
    spacingBottom: 15,
    spacingLeft: 10,
    colors: [...]                 //图上线的颜色

一.chart的部分相关属性说明
    renderTo: 'container',      //图表的页面显示容器(也就是要显示到的div)
    defaultSeriesType: 'line',  //图表类型(line、spline、scatter、splinearea、bar、pie、area、column)
    marginRight: 50,            //上下左右空隙(图表跟图框之间)
    marginBottom: 60,           //下面空隙如果不够大,图例说明有可能看不到
    plotBackgroundImage: '../graphics/skies.jpg', //(图表的)背景图片
    plotBackgroundColor:        //背景颜色
    width: 1000,                //图框(最外层)宽(默认800)
    height: 500,                //图框高(默认500) 
    backgroundColor: "red"      //图框的背景颜色
    borderColor: "red"          //图框的边框颜色
    borderRadius: 5,            //图框的圆角大小
    borderWidth: 9,             //图框的边框大小
    inverted: false,            //(使图)倒置
    plotBorderColor: "red",     //图表的边框颜色
    plotBorderWidth: 0,         //图表的边框大小
    plotShadow: false,          //图表是否使用阴影效果
    reflow: false,   
    shadow:true                 //图框是否使用阴影
    showAxes: false,            //是否最初显示轴
    spacingTop: 100,            //图表上方的空白
    spacingRight: 10,
    spacingBottom: 15,
    spacingLeft: 10,
    colors: [...]                 //图上线。。的颜色

二. credits的部分相关属性说明
    credits:  //设置右下角的标记。highchart.com (这个也可以在highcharts.js里中修改)
    {    
        //enabled: true,      //是否显示
        position: {           //显示的位置                   
            align: 'left',       
            x: 10                           
        },
        text: "xoyo.com",           //显示的文字
        style:{                     //样式
            cursor: 'pointer',
            color: 'red',
            fontSize: '20px'
        },
        href: 'http://www.xoyo.com', //路径
    },
三. title的部分相关属性说明
    title: //标题
    { 
        text: '月份平均温度',
        x: -20,                  //center //水平偏移量 
        y: 100                   //y:垂直偏移量
        align: 'right'         //水平方向(left, right, bottom, top)
        floating: true,          //是否浮动显示
        margin: 15,
        style: ,                 //样式
        verticalAlign: "left"    //垂直方向(left, right, bottom, top)
    },
四. xAxis或者YAxis的部分相关属性说明
    categories: ['一月', '二月'],
    //allowDecimals: false
    //alternateGridColor: 'red'       //在图表中相隔出现纵向的颜色格栅
    //dateTimeLabelFormats: ,
    //endOnTick: false,               //是否显示控制轴末端的一个cagegories出来
    //events: {
    //setExtremes:
    //},
    //gridLineColor: "red",           //纵向格线的颜色
    //gridLineDashStyle: Solid        //纵向格栅线条的类型
    //gridLineWidth: 5,               //纵向格线的的大小
    //id: null,
    //labels: {  //X轴的标签(下面的说明)
        //align: "center",              //位置
        //enabled: false,               //是否显示
        //formatter: ,
        //rotation: 90,                 //旋转,效果就是影响标签的显示方向
        //staggerLines: 4,              //标签的交错显示(上、下)
        //step: 2,                      //标签的相隔显示的步长
        //style:{},
        //x: 100,                     //偏移量,默认两个都是0,
        //y: 40
        
    //},
    //lineColor: "red",               //X轴的颜色
    //lineWidth: 5,                   //X轴的宽度
    //linkedTo:1,
    //opposite: true                  //是否把标签显示到对面
    //max: 12,                        //显示的最大值
    //maxPadding: 6,
    //maxZoom: 1,
    //min: 10,                        //显示的最小值
    //minorGridLineColor: 'red',        //副格线的颜色
    //minorGridLineDashStyle: 'blod', //副格线的的颜色
    //minorGridLineWidth: 50,         //副格线的宽度
    //minorTickColor: #A0A0A0,        //???没有看出效果
    minorTickInterval:3,               //副标记的间隔
    //minorTickLength: 10,             //副标记的长度
    //minorTickPosition: 'inside',     //副标记的位置
    //minorTickWidth: 5,               //副标记的宽
    //minPadding: 0.01,
    //offset: 0,                       //坐标轴跟图的距离
    //plotBands: //使某数据块显示不同的效果    
    //plotLines: [{         //标线属性
        //value: 0,      //值为0的标线
    //}],        
    //tickmarkPlacement: "on",   //标记(文字)显示的位置,on表示在正对位置上。
    //reversed: true,            //是否倒置
    //showFirstLabel: false,     //第一个标记的数值是否显示
    //startOfWeek: 2,
    //tickColor: 'blue',         //标记(坐标的记号)的颜色
    //tickInterval: 20,          //标记(坐标的记号)的步长
    //tickLength: 5,
    //tickmarkPlacement: "on",
    //tickPixelInterval: 1000,   //两坐标之间的宽度
    //tickPosition: "inside",    //坐标标记的方向
    //title: {                   //设置坐标标题的相关属性
        //margin: 40,
        //rotation: 90,
        //text: "Y-values",
        //align: "middle",
        //enabled: "middle",
        //style: {color: 'red'}
    //},
    //type: "linear"
五.tooltip的部分相关属性说明

tooltip.valueDecimals:允许的小数点位数。

tooltip.percentageDecimals:允许百分比的小数点后位数。

tooltip: //提示框设置
    {      
        formatter: function() {  //格式化提示框的内容样式
        return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'°C';
        },                       
        backgroundColor: '#CCCCCC',   //背景颜色
        //borderColor: '#FCFFC5'      //边框颜色
        //borderRadius: 2             //边框的圆角大小
        borderWidth: 3,               //边框宽度(大小)
        //enabled: false,             //是否显示提示框
        //shadow: false,              //提示框是否应用阴影
        //shared: true,               //当打开这个属性,鼠标几个某一区域的时候,如果有多条线,所有的线上的据点都会有响应(ipad)
        //snap: 0,                  
        crosshairs: {                 //交叉点是否显示的一条纵线
            width: 2,
            color: 'gray',
           dashStyle: 'shortdot'
        }
        style: {  //提示框内容的样式
            color: 'white',
            padding: '10px',    //内边距 (这个会常用到)
            fontSize: '9pt',            
        }
    },
六.legend(图例说明)的部分相关属性说明
    legend: //图例说明
    {   
        //layout: 'vertical',   //图例说明布局(垂直显示,默认横向显示)
        align: 'center',        //图例说明的显示位置
        //verticalAlign: 'top', //纵向的位置
        //x: 250,                 //偏移量 
        //y: 0,               
        borderWidth: 1,            //边框宽度
        //backgroundColor: 'red'   //背景颜色
        borderColor: 'red',
        //borderRadius             //边框圆角
        //enabled: false          //是否显示图例说明
        //floating:true           //是否浮动显示(效果就是会不会显示到图中)
        //itemHiddenStyle: {color: 'red'},
        //itemHoverStyle: {color: 'red'}   //鼠标放到某一图例说明上,文字颜色的变化颜色
        //itemStyle:  {color: 'red'}   //图例说明的样式
        //itemWidth:                   //图例说明的宽度
        //labelFormatter: function() { return this.value}       //?????????????默认(return this.name)
        //lineHeight: 1000             //没看出明显效果
        //margin: 20
        //reversed:true                //图例说明的顺序(是否反向)
        //shadow:true                  //阴影
        //style: {color:'black'}
        //symbolPadding: 100           //标志(线)跟文字的距离
        //symbolWidth: 100             //标志的宽
        //width:100
    },
七. plotOptions的部分修改属性说明

plotOptions.area.allowPointSelect:是否允许数据点的点击。

plotOptions.area.color:绘图的颜色。

plotOptions.area.dataLabels.enabled:是否允许数据标签。

plotOptions.area.enableMouseTracking:是否允许数据图表中,数据点的鼠标跟踪气泡显示。

plotOptions.area.events.checkboxClick:数据图表中图注中复选框的点击事件。

plotOptions.area.events.click:数据图表中,数据点的点击事件。

plotOptions.area.events.hide:数据图表中,某一数据序列隐藏时的事件。

plotOptions.area.events.show:数据图表中,某一数据序列显示时的事件。

plotOptions.area.events.legendItemClick:数据图表中,图注中的项目被点击时的事件,直接赋值false,则不可点击。

plotOptions.area.events.mouseOut:数据点的鼠标移出事件。

plotOptions.area.events.mouseOver:数据点的鼠标经过事件。

plotOptions.area.marker.enabled:图表中绘图中是否显示点的标记符。

plotOptions.area.marker.states.hover.enabled:是否允许标记符的鼠标经过状态。

plotOptions.area.marker.states.select.enabled:是否允许标记符的选择状态。

plotOptions.area.point.events.click:图表中每一个单独的点点击事件。

plotOptions.area.point.events.mouseOut

plotOptions.area.point.events..mouseOver

plotOptions.area.point.events.remove:删除图表中的点时的事件。

plotOptions.area.point.events.select:图表中点选择事件。

plotOptions.area.point.events.unselect:图表中点取消选择时的事件。

plotOptions.area.point.events.update:图表中数据发生更新时的事件。

plotOptions.area.visible:加载时,数据序列默认是显示还是隐藏。

plotOptions.area.zIndex:在多序列的情况下,调整每一个序列的层叠顺序。

以上的point.events同样还适用于其他面积类图表(arearange、areaspline、areasplinerange),其他的柱状图(bar、column)及所有图表。

plotOptions.area.showInLegend:是否在图注中显示。

plotOptions.area.stacking:是以值堆叠,还是以百分比堆叠。

plotOptions.area.states.hover.enabled:鼠标放上的状态是否允许。

plotOptions.area.stickyTracking:鼠标粘性跟踪数据点。

plotOptions.arearange,plotOptions.areaspline,plotOptions.areasplinerange类同于plotOptions.area

plotOptions.bar.groupPadding:对于柱状图分组,每个分组之间的间隔。

plotOptions.bar.grouping:是否对数据进行分组。

plotOptions.bar.minPointLength::定义当point值为零时,点的最小长度为多少

plotOptions.bar.showInLegend:是否在图注中显示。

plotOptions.bar.stacking:是以值堆叠,还是以百分比堆叠(normal/percent)。

plotOptions.column,plotOptions.columnrange类同于plotOptions.bar

plotOptions.line的相关配置类似于plotOptions.area配置。

plotOptions.pie.ignoreHiddenPoint:在饼状图中,某一个序列经图注点击隐藏后,整个饼状图是重新以100%分配,还是只在原图基础上隐藏,呈现一个缺口。

plotOptions.pie.innerSize:绘制饼状图时,饼状图的圆心预留多大的空白。

plotOptions.pie.slicedOffset:与allowPointSelect结合使用,当点被点击时,对应的扇区剥离,这个参数即配置离开的距离。

plotOptions.pie的其他常用配置参数类同于plotOptions.area,plotOptions.scatter,plotOptions.series,plotOptions.spline的相关配置类似于plotOptions.area配置。

八.exporting导出数据相关属性

exporting.buttons.exportButton.enabled:是否允许显示导出按钮。

exporting.buttons.exportButton.menuItems:导出按钮的菜单选项。

exporting.buttons.exportButton.onclick:导出按钮被点击的事件,不是内部的菜单。

exporting.buttons.printButton.enabled:是否允许打印按钮。

exporting.buttons.printButton.onclick:打印按钮的点击事件。

exporting.enabled:打印和导出按钮是否被允许。

exporting.filename:被导出文件的文件名。

exporting.type:默认导出图片的文件格式。

exporting.url:SVG图表转换并导出的接口处理地址。

exporing.width:默认导出图片的宽度。

highcharts图表配置参数汇总的更多相关文章

  1. 网页图表控件Highcharts选项配置参数

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  2. Kafka 配置参数汇总及相关说明

    Kafka为broker,producer和consumer提供了很多的配置参数. 了解并理解这些配置参数对于我们使用kafka是非常重要的.本文列出了一些重要的配置参数. 官方的文档 Configu ...

  3. Redis配置参数汇总

    ==配置文件全解=== ==基本配置daemonize no 是否以后台进程启动databases 16 创建database的数量(默认选中的是database 0) save 900 1 #刷新快 ...

  4. highcharts图表史上最全的参数配置(属性+事件)

    今天这里将给大家全全展现相关的参数配置: chart.events.addSeries:添加数列到图表中. chart.events.click:整个图表的绘图区上所发生的点击事件. chart.ev ...

  5. highcharts基本配置和使用highcharts做手机端图标

    使用highcharts三个理由:1>手机适配2>大数据的支持3>svg的优势缺点:不开源.学习资料少 官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用 ...

  6. Highcharts选项配置详细说明文档(zz)

    http://www.helloweba.com/view-blog-156.html Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明 ...

  7. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  8. highcharts 图表库的简单使用

    Highcharts简介: Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.曲线图.面积图 ...

  9. Jquery Highcharts 选项配置 说明文档

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,下面为Highcharts常用的最核心的参数选项配置. Chart:图表区选项 Chart图表区选项用于设置图表区相关属性 ...

随机推荐

  1. linux服务器---安装samba

    安装samba 1.检测samba是否安装,如果没有,那么可以使用yum来安装.至少需要安装3个软件:samba,samba-client.samba-common [root@localhost p ...

  2. JS方法的使用

    $("#yingxiang_id li").each(function () { if ($(this).find(".div-relative").attr( ...

  3. 05: MySQL高级查询

    MySQL其他篇 目录: 参考网站 1.1 GROUP BY分组使用 1.2 mysql中NOW(),CURDATE(),CURTIME()的使用 1.3 DATEDIFF() 函数 1.4 DATE ...

  4. poj 2369 Permutations - 数论

    We remind that the permutation of some final set is a one-to-one mapping of the set onto itself. Les ...

  5. grep如何结尾匹配

    答:grep "jello$" 如:git branch输出以下内容: yes-jello-good yes-jellos yes-jello 那么使用以下命令只能过滤出一行: $ ...

  6. LightOJ 1229 Treblecross(SG函数打表 + 遍历)题解

    题意:给你一串含“.”和“X”的字串,每次一个玩家可以把‘."变成“X”,谁先弄到三个XXX就赢.假如先手必赢,输出所有能必赢的第一步,否则输出0. 思路:显然如果一个X周围两格有X那么肯定 ...

  7. decimal and double ToString problem

    decimal d2 = 0.0000002500m; Console.WriteLine(d2.ToString()); double d3 = 0.0000002500; Console.Writ ...

  8. spring boot 启动后执行初始化方法

    http://blog.csdn.net/catoop/article/details/50501710 1.创建实现接口 CommandLineRunner 的类 package org.sprin ...

  9. Unity3D学习笔记(一):Unity简介、游戏物体、组件和生命周期函数

    Project(工程.项目):工程是把游戏开发当前所需要的资源归类管理用的. Console控制台:日志.报错.调试,右上角,消息过滤 Assets:资源,存储游戏中一切用到的资源 Library:临 ...

  10. 【Android实验】 数据存储与访问sqlite

    目录 实验目的 实验要求 实验过程 功能分析: 实验结果: 实验的代码 实验总结 实验目的     分别使用sqlite3工具和Android代码的方式建立SQLite数据库.在完成建立数据库的工作后 ...