最后修改时间:2019-03-19 11:07
本节主要讲解图表配置,对应的 API 位置为 chart
,主要内容包括图表全局样式、绘图区、图表事件、等相关内容。
Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种:
var charts = Highcharts.chart('container', {
// Highcharts 配置
});
var charts = Highcharts.chart({
// Highcharts 配置
chart : {
renderTo : 'container' // 或 document.getElementById('container')
}
});
$("#container").highcharts({
// Highcharts 配置
});
关于 Highcharts 的构造函数详见 API 文档
Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的,即
<div id="container" style="width:400px;height:400px"></div>
如果容器没有设定宽高,默认是 宽 400px
, 高 400px
,另外设置容器的 min-width
属性可以让 highcharts 自适应宽度,实例:
<div id="container" style="min-width:400px;height:400px"></div>
特别说明:饼图中可以通过设置宽高来让图形填充满整个容器
图表样式属性包括 border、backgroundColor、margin、spacing、style等
示例代码:
chart: {
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
}
}
另外还可以通过 chart.className
来绑定 CSS 类并给定 CSS 样式。
图表绘图区的可配置属性有:
通过 chart.type
来指定图表类型,表示如果默认图表类型,即如果 series 中没有指定 type, 那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions
。
图表缩放包括缩放(zoom)和平移(pan),对应的属性有:
“x”
、“y”
、“xy”
,分别表示水平缩放、竖直缩放、平面缩放Highcharts 4.0 开始支持 3D 图表类型,目前支持 3D 柱形图、3D 饼图、3D 散点图。
3D 相关属性见:chart.options3d ,关于 3D 图形的详细教程将以单独文章形式给出。
chart.inverted = true
即可。chart.animation
可以设置图表的全局动画效果,这里的动画指的是图表更新时的动画效果,而图表初始化的动画是在 plotOptions.series.animation
中启用和关闭的。min-width
可以让图表自适应,这个开关对应的属性是 chart.reflow
,另外,还可以通过 API 接口 Chart.reflow
在外部对图表进行自适应操作,在线试一试本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22