【新手必看】Highcharts的100个基础问答

来源：互联网发布：6u网络机柜编辑：程序博客网时间：2024/04/28 22:11

为了方便说明，先贴出Highcharts主要组成部分的说明图

图1：highcharts主要组成部分

图中名字解释：

Title & SubTitle 图表标题及副标题
exporting 图表导出功能按钮
tooltip 数据提示框
xAxis、yAxis x、y轴
Series 数据序列
legend 图例
credits 版权标签

1、图表中的 highcharts.com 怎么去掉？

答：通过设置 credits.enabled= false 即可，即

credits: {

enabled:false

}

另外，该文字及连接都是可以自定义的，详见 API credits

2、如何增加导出功能（或显示导出按钮）？

答：通过引入 exporting.js 即可给图表增加导出功能，即添加如下代码

同理，如果不想要导出功能，不引入exporting.js 即可，另外，禁用导出功能还可以通过设置 exporting.enabled = false，详见API exporting.enabled

3、如何去掉图例（legend）？

答：设置 legend.enable = false 即可，即

legend: {

enabled:false

}

饼图需要设置 plotOptions.pie.showInLegend = true 才可显示图例。

4、如何设置图表颜色

1）最基本的图表线条（或柱形等），是通过 colors 来设置的，即

colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']

其中颜色值及个数完全可以自定义

2）定义某个点的颜色

通过设置 series.data.color 实现对某个点进行自定义颜色，实例效果如下

3）对于柱状图单个序列不同柱形颜色自定义，除了设置 colors外，还需要额外设置 plotOptions.column.colorByPoint = true ，其他类型图表类似的也有

参考帖子：http://bbs.hcharts.cn/thread-491-1-2.html

5、如何将图表中的英文汉化（显示成中文）？

请查看帖子：http://bbs.hcharts.cn/thread-70-1-1.html

即设置 lang 属性，改属于用于图表中文字的显示，也就是说，图表中所有文字的修改都可以通过该属性下来设置。

实例代码：

Highcharts.setOptions({

lang:{

contextButtonTitle:"图表导出菜单",

decimalPoint:".",

downloadJPEG:"下载JPEG图片",

downloadPDF:"下载PDF文件",

downloadPNG:"下载PNG文件",

downloadSVG:"下载SVG文件",

drillUpText:"返回 {series.name}",

loading:"加载中",

months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

noData:"没有数据",

numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],

printChart:"打印图表",

resetZoom:"恢复缩放",

resetZoomTitle:"恢复图表",

shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"].,

thousandsSep:",",

weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"].

}

});

$("#container").highcharts({

// Highcharts 代码

});

注意：Highcharts.setOptions({}) 属于全局配置，代码是放在 $("#container").highcharts({}) 外面。

6、如何去掉图例单击事件？

即如何使点击图例（Legend）不隐藏对应的序列（Series），设置代码是：

plotOptions: {

series: {

events: {

legendItemClick: function(event) {

return false; //return false 即可禁用LegendIteml，防止通过点击item显示隐藏系列

}

参考实例：http://www.hcharts.cn/demo/index.php?p=92

7、如何在初始化的时候隐藏某个线条（或序列Series）？

对应的效果是

即默认隐藏某个（或多个）线条，实现代码是

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],

visible: false//默认不显示

}, {

data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],

}]

该代码出自在线演示：通过点击图例显示与隐藏数据列

那么问题来了，眼神好的小伙伴就又有疑惑了，“visible” 这个属性在API中没有的，为什么你可以这么做？

答：“在api中没有的属性在样例中却使用了这是什么个意思？”

“您真是个活字典”， !-_-

转载于：http://bbs.hcharts.cn/article-21-1.html

0 0