• highcharts图表配置参数汇总


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

    .chart的部分相关属性说明
        renderTo: 'container',      //图表的页面显示容器(也就是要显示到的div)
        defaultSeriesType: 'line',  //图表类型(linesplinescattersplineareabarpieareacolumn)
        marginRight: 50,            //上下左右空隙(图表跟图框之间)
        marginBottom: 60,           //下面空隙如果不够大,图例说明有可能看不到
        plotBackgroundImage: '../graphics/skies.jpg', //(图表的)背景图片
        plotBackgroundColor:        //背景颜色
         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: {                 //交叉点是否显示的一条纵线
                 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             //标志的宽
            //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同样还适用于其他面积类图表(arearangeareasplineareasplinerange),其他的柱状图(barcolumn)及所有图表。

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

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

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

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

    plotOptions.arearangeplotOptions.areasplineplotOptions.areasplinerange类同于plotOptions.area

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

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

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

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

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

    plotOptions.columnplotOptions.columnrange类同于plotOptions.bar

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

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

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

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

    plotOptions.pie的其他常用配置参数类同于plotOptions.area,plotOptions.scatterplotOptions.seriesplotOptions.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.urlSVG图表转换并导出的接口处理地址。

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

     

  • 相关阅读:
    MQTT TLS 加密传输
    python多进程并发redis
    各种消息队列的特点
    mqtt异步publish方法
    Numpy API Analysis
    Karma install steps for unit test of Angular JS app
    reinstall bower command
    Simulate getter in JavaScript by valueOf and toString method
    How to: Raise and Consume Events
    获取对象的类型信息 (JavaScript)
  • 原文地址:https://www.cnblogs.com/jj-z/p/8144976.html
Copyright © 2020-2023  润新知