highcharts选项配置文档说明-聚优部落

highcharts选项配置文档说明

添加时间：2021-02-25 02:53:27

站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!

赞助一下

预览

当前位置：

前端特效

其它特效

hightcharts中文文档很丰富，详细请看highcharts中文网。

分类：其它特效 > 统计图难易：初级

Chart：图表区、图形区和通用图表配置选项

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

Color：颜色选项

Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：

Highcharts.setOptions({ 
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'] 
});

Title：标题选项

Subtitle：副标题选项

副标题提供的属性选项与标题title大致相同，可参照上述标题选项，值得一提的是副标题的text选项默认为''，即空的，所以默认情况下副标题不显示。

xAxis：X轴选项

yAxis：Y轴选项同上

Series：数据列选项

<table class="table_parameters" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr class="tr_head"> <td width="25%">参数</td> <td>描述</td> <td width="10%">默认值</td> </tr> <tr> <td align="center">data</td> <td> 显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或 <br> data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] </td> <td align="center">''</td> </tr> <tr> <td align="center">name</td> <td>显示数据列的名称。</td> <td align="center">''</td> </tr> <tr> <td align="center">type</td> <td>数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or spline</td> <td align="center">line</td> </tr> </tbody> </table>

plotOptions：数据点选项

Tooltip：数据点提示框

Legend：图例选项

标示线的常见属性

标示线是x轴或y轴上的标记特殊刻度的线，它的属性包括了颜色，事件，id，标签，和zIndex层叠，常见属性如下表所示：

1、Labels：标签
plotLines:[{
    // ..., 省略代码
    label:{
        text:'我是标示线的标签',     //标签的内容
        align:'left',                //标签的水平位置，水平居左,默认是水平居中center
        x:10                         //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
    }
}]

2、Events：事件 
plotLines:[{
    //..., 省略代码
    events:{
        click:function(){
             //当标示线被单击时，触发的事件
        },
        mouseover:function(){
            //当标示线被鼠标悬停时，触发的事件
        },
        
        mouseout:function(){
            //当标示线被鼠标移出时，触发的事件
        },
        
        mousemove:function(){
            //当标示线被鼠标移动(时，触发的事件
        }
    }
}]

经典示例：<a href='http://localhost/sucai/jquery/demo/48' target='_blank'>highcharts柱状图</a>

highcharts选项配置文档说明

Chart：图表区、图形区和通用图表配置选项

Color：颜色选项

Title：标题选项

Subtitle：副标题选项

xAxis：X轴选项

yAxis：Y轴选项同上

Series：数据列选项

plotOptions：数据点选项

Tooltip：数据点提示框

Legend：图例选项

标示线的常见属性

上一篇：两款创意bootstrap分页按钮样式动画特效

下一篇：html5 svg绘制卡通玫瑰花动画特效

highcharts选项配置文档说明

Chart：图表区、图形区和通用图表配置选项

Color：颜色选项

Title：标题选项

Subtitle：副标题选项

xAxis：X轴选项

yAxis：Y轴选项同上

Series：数据列选项

plotOptions：数据点选项

Tooltip：数据点提示框

Legend：图例选项

标示线的常见属性

上一篇：两款创意bootstrap分页按钮样式动画特效

下一篇：html5 svg绘制卡通玫瑰花动画特效

回帖

内容举报

举报类型：

说明：

附件下载

下载验证：

附件：

发帖找资源

回帖

会员登陆