Highcharts的选项配置参数

今天药忘吃喽~ 2022-08-13 11:52 167阅读 0赞

#### Chart：图表区选项 ####

Chart图表区选项用于设置图表区相关属性。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14.399999618530273px; line-height:26px; text-align:left"> 
 <tbody> 
 <tr> 
 <td>参数</td> 
 <td>描述</td> 
 <td>默认值</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：颜色选项 ####

Color颜色选项用于设置图表的颜色方案。

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

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

#### Title：标题选项 ####

Title标题选项用于设置图表的标题相关属性。

#### Subtitle：副标题选项 ####

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

#### xAxis：X轴选项 ####

X轴选项用于设置图表X轴相关属性。

#### yAxis：Y轴选项 ####

Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。