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-05-21 10:32

Highcharts 是通过 JavaScript 对象的形式(JSON)来定义图表的配置参数。

一、图表配置对象

当使用图表构造函数 Highcharts.Chart 来初始化图表时,图表的配置对象是以第二个参数传递给该构造函数的。

下面是示例代码(其中红色部分是配置对象):

var options = {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
};
var chart = Highcharts.chart('container', options);

为了更好的使用 Highcharts 配置,你需要了解 JavaScript 对象的基本知识,下面我们简单的说一些 JavaScript 对象操作的要点。

1、对象的创建及赋值

对于 C语言风格的开发者来说,下面的方式更符合编写习惯

var oiptions = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'line';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = '小明';
options.series[0].data = new Array(1, 0, 4);

上述编写方式在 JS 里是不推荐的,更好的做法应该是

var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    series: [{
        name: '小明',
        data: [1, 0, 4]
    }]
}

因为后面的方式更简单易读(当然上述两种方式运行的结果是一样的),这也是 JSON 的优势。

创建配置对象后,我们就可以通过构造函数来创建图表了。

var chart = Highcharts.chart('container', options);

2、对象取值

在 JS 中可以通过点号或中括号的形式取对象的值,另外可以通过 delete 删除对象属性,示例代码如下:

options.chart.type     // JS 对象取值
options.chart['type']  // 同上
delete options.chart.type // 删除属性

3、数组相关操作

JS 数组的创建可以用 new Array() 或更简单的 [] 来创建,其中 length 属性为数组的长度,push() 函数可以添加数组元素;join() 可以将数组转换成字符串,相应字符串可以通过的 split() 函数将其分隔成数组,下面用示例代码说明:

var series = [{
    name: '小明',
    data: []
}];

series.push({
    name: '小红',
    data: []
});

series[2].name;


var arr = [1, 2, 4, 10, 20];
var arrJoin = arr.join(); // 结果"1,2,4,10,20",默认的分隔符是 ,
arrJoin.split(',');       // 将字符串按照 , 分隔,结果是 [1, 2, 4, 10, 20]

二、全局配置

全局配置是针对同一个页面多个图表有效的配置,我们将多个图表的相同配置提取出来并配置在全局配置中(这样就可以省去在每个图表中配置一样的参数,这也是 Highcharts API 灵活性的表现)。

实例代码如下:

// 全局配置,针对页面上所有图表有效
Highcharts.setOptions({
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
                ]
        },
        borderWidth: 2,
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    }
});

var chart1 = Highcharts.chart('container', {
    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});

var chart2 = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 3600 * 1000 // one hour
    }]
});

在线试一试

版权声明

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

标题:如何设置图表配置选项 | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/how-to-set-options/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新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