首页 > 代码库 > highcharts 配置选项
highcharts 配置选项
Highcharts给了丰富的配置项，用于满足用户的需求。在我这个项目中，图表开始由美工设计，在应用highcharts的时候，读了highcharts的文档，着实仔细的配置了一番。
比如Legend的配置，坐标轴的样式等等。
先附上一个表格，再记录几个项目中用到的例子，备用。
1. xAxis：X轴选项
X轴选项用于设置图表X轴相关属性。
| 参数 | 描述 | 默认值 |
| categories | 设置X轴分类名称，数组，例如：categories: [‘Apples‘, ‘Bananas‘, ‘Oranges‘] | [] |
| title | X轴名称，支持text、enabled、align、rotation、style等属性 | |
| labels | 设置X轴各分类名称的样式style，格式formatter，角度rotation等。 | array |
| max | X轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值。 | null |
| min | X轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。 | array |
| gridLineColor | 网格（竖线）颜色 | #C0C0C0 |
| gridLineWidth | 网格(竖线)宽度 | 1 |
| lineColor | 基线颜色 | #C0D0E0 |
| lineWidth | 基线宽度 |
2. yAxis：Y轴选项
Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。
3. Series：数据列选项
数据列选项用于设置图表中要展示的数据相关的属性。
| 参数 | 描述 | 默认值 |
| data | 显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或 data: [{name: ‘Point 1‘,y: 0}, {name: ‘Point 2‘,y: 5}] | ‘‘ |
| name | 显示数据列的名称。 | ‘‘ |
| type | 数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or spline | line |
4. plotOptions：数据点选项
plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，现将常用选项列出来。
| 参数 | 描述 | 默认值 |
| enabled | 是否在数据点上直接显示数据 | false |
| allowPointSelect | 是否允许使用鼠标选中数据点 | false |
| formatter | 回调函数，格式化数据显示内容 | formatter: function() {return this.y;} |
5. Tooltip：数据点提示框
Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。
| 参数 | 描述 | 默认值 |
| enabled | 是否显示提示框 | true |
| backgroundColor | 设置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框边框颜色，默认自动匹配数据列的颜色 | auto |
| borderRadius | 提示框圆角度 | 5 |
| shadow | 是否显示提示框阴影 | true |
| style | 设置提示框内容样式，如字体颜色等 | color:‘#333‘ |
| formatter | 回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：<b>, <strong>, <i>, <em>, <br/>, <span> | 2 |
6. exporting:导出选项
一般都禁用了
7. credits：商标
一般都禁用了
8. Legend：图例选项
legend用于设置图例相关属性。
| 参数 | 描述 | 默认值 |
| layout | 显示形式，支持水平horizontal和垂直vertical | horizontal |
| align | 对齐方式。 | center |
| backgroundColor | 图例背景色。 | null |
| borderColor | 图例边框颜色。 | #909090 |
| borderRadius | 图例边框角度 | 5 |
| enabled | 是否显示图例 | true |
| floating | 是否可以浮动，配合x，y属性。 | false |
| shadow | 是否显示阴影 | false |
| style | 设置图例内容样式 | ‘‘ |
| symbolWidth | 设置图例中标志的宽度 | 如果不想要这个标志，把宽度设置为0 |
| itemHoverStyle | 图例中文字hover时的样式 | |
| itemStyle | 图例文字的样式 | { "color": "#fff","font-size":"18px","font-family":"微软雅黑","font-weight":"normal" } |
项目中的例子:
在这个图表中，看不到x轴和Y轴，有tooltip
配置是这样的：
xAxis: { labels: { enabled: false //不显示x轴上的label，数字标识 }, gridLineWidth: 0, //不显示表格线lineWidth: 0 //不显示坐标轴线},yAxis: { labels: { enabled: false // min: 0 //min:0 表示y轴最小从0开始，注释掉，则y轴支持负值 },min: 0,gridLineWidth: 0,title: { text: ‘‘, align: ‘high‘},title: {align: ‘left‘,text: ‘销售趋势图‘,x: 10,y: 30, //配置Title的坐标useHTML: true,style: { "color": "#fff", "font-size": "18px", "font-family": "微软雅黑", "font-weight": "normal" }}
Example 2：
在这个图中， 柱子背景颜色不同，尝试使用colors属性设置，并不起作用，后来发现设置series 的data属性可以达到效果。
series: [{ name: ‘Population‘, data: [{‘color‘:‘颜色值‘,‘y‘:‘数值‘}, {‘color‘:‘颜色值‘,‘y‘:‘数值‘}, {‘color‘:‘颜色值‘,‘y‘:‘数值‘}, {‘color‘:‘颜色值‘,‘y‘:‘数值‘}], //设置柱上的背景颜色和数值 dataLabels: {//设置柱上的数字显示样式 enabled: true, color: ‘#666‘, align: ‘center‘, x: 14, y: 0, style: { fontSize: ‘13px‘, fontFamily: ‘Verdana, sans-serif‘ } } }]
highcharts 配置选项
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。