HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

图表配置

最后修改时间:2019-03-19 11:07

本节主要讲解图表配置,对应的 API 位置为 chart,主要内容包括图表全局样式、绘图区、图表事件、等相关内容。

一、图表容器

Highcharts 实例化中绑定容器的方式有很多种方式,这里列举三种:

1、通过构造函数

var charts = Highcharts.chart('container', {
  // Highcharts 配置
});

2、或者通过 chart.renderTo 来指定

var charts = Highcharts.chart({
    // Highcharts 配置
    chart : {
        renderTo : 'container'  // 或 document.getElementById('container')
    }
}); 

3、如果你的页面已经引入了 jQuery,那么还可以 jQuery 插件的形式调用

$("#container").highcharts({
    // Highcharts 配置  
}); 

关于 Highcharts 的构造函数详见 API 文档

二、图表样式

1、宽度、高度

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>

特别说明:饼图中可以通过设置宽高来让图形填充满整个容器

2、图表样式

图表样式属性包括 border、backgroundColor、margin、spacing、style等

  • 边框:包括 borderColor、borderRadius、borderWidth
  • 背景:包括 backgroundColor
  • 外边距:包括 margin、marginTop、marginRight、marginBottom、marginLeft
  • 内边距:包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
  • 其他样式:其他属性例如字体等属性,实例代码

示例代码:

chart: {
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

另外还可以通过 chart.className 来绑定 CSS 类并给定 CSS 样式。

3、图表绘图区

图表绘图区的可配置属性有:

  • plotBackgroundColor : 绘图区背景颜色
  • plotBackgroundImage : 绘图区背景图片
  • plotBorderColor : 绘图区边框颜色
  • plotBorderWidth : 绘图区边框宽度
  • plotShadow : 绘图投影

三、事件

  • click :图表点击事件,效果见 在线演示
  • load :图表加载完后事件,效果见 在线演示
  • addSeries :图表增加序列事件,效果见 在线演示
  • drilldown :图表下钻事件,效果见 在线演示
  • drillup : 图表上钻事件,效果见 在线演示
  • redraw :图表重绘事件,效果见 在线演示
  • selection : 图表范围选择事件,效果见 在线演示
  • beforePrint : 图表打印前事件,效果见 在线演示
  • afterPrint : 图表打印后事件,效果见 在线演示

四、其他配置

1、图表类型

通过 chart.type 来指定图表类型,表示如果默认图表类型,即如果 series 中没有指定 type, 那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。

2、图表缩放

图表缩放包括缩放(zoom)和平移(pan),对应的属性有:

  • zoomType : 缩放类型,值可以是 “x”、“y”、“xy”,分别表示水平缩放、竖直缩放、平面缩放
  • 缩放恢复按钮:可以指定按钮的样式、位置等,见 resetZoomButton,按钮的文字可以通过 lang 中的属性来指定
  • selectionMarkerFill :选中背景色,详细参考 API 文档
  • panKey:平移键,默认是 “Shift”,即在启用平移后,按住指定的按键即可对图表进行平移操作,在线试一试
  • panning : 是否启用平移,启用平移后,按住平移键,然后就可以用鼠标对图表进行平移操作(即平移操作是平移键加鼠标拖动)

3、3D 属性

Highcharts 4.0 开始支持 3D 图表类型,目前支持 3D 柱形图、3D 饼图、3D 散点图。
3D 相关属性见:chart.options3d ,关于 3D 图形的详细教程将以单独文章形式给出。

4、其他

  • 图表反转 : 图表反转指的是将图表的 x轴和 y轴进行对调操作,对应的只需要设置 chart.inverted = true 即可。
  • 图表动画 :chart.animation 可以设置图表的全局动画效果,这里的动画指的是图表更新时的动画效果,而图表初始化的动画是在 plotOptions.series.animation 中启用和关闭的。
  • 图表自适应 :前面说过通过设置图表容器的 min-width 可以让图表自适应,这个开关对应的属性是 chart.reflow,另外,还可以通过 API 接口 Chart.reflow 在外部对图表进行自适应操作,在线试一试

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:图表配置 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/basic-chart/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22