不是说下大雨吗？玩儿呐？搁哪呢？大雨搁哪呢？下丢啦？哗啦到海里去啦？让五娃给吞啦？南方整的那老大，看不起副中心咋的？还能不能 雨～露～均～沾～？你说我小船儿都买好了，搁哪划，搁哪划！！给我一个完美的解释！
北京气象局通知： 原约定于昨天和今早来的暴雨，因办进京证，耽误了点儿时间，或许今天夜间赶到。这场雨如果下大了肯定不小，如果下小了也肯定不会大，请市民再耐心等待！具体情况等下完后气象台会报给市民。气象台温馨提醒：今天如果不下雨，明天不下雨的话，这两天就没有雨了，就看后天的了。 气象台郑重劝告美女们最近几天不要穿裙子，容易被撩，雨是好雨，但风不正经！
今天早上，这两条段子又在朋友圈以及各大评论网站火了一把，原定于昨天傍晚到今天的暴雨，迟迟未到，朋友们都“re hu qi”（方言哦）了，今早北京气象部门这样说，请看图
好了，技术出身的你，可能已经明白了，小编不讲天气，不讲情怀，不讲段子，讲的是技术、技术.........那么问题来了，类型这样的图表，折线图、热点图、柱状图、饼图...等等，是怎么实现的，怎么画出来的呢？告诉你，可用“highcharts”(https://www.hcharts.cn)
今天，我们来讲一下Highcharts的几个基础知识，为了方便说明，先贴出Highcharts主要组成部分说明图：
图1：highcharts主要组成部分
图中名字解释：
- Title & SubTitle 图表标题及副标题
- exporting 图表导出功能按钮
- tooltip 数据提示框
- xAxis、yAxis x、y轴
- Series 数据序列
- legend 图例
- credits 版权标签
1、图表中的 highcharts.com 怎么去掉？
答：通过设置 credits.enabled= false 即可，即
credits: {
enabled:false
}
另外，该文字及连接都是可以自定义的， 详见 API
2、如何增加导出功能（或显示导出按钮）？
答：通过引入 exporting.js 即可给图表增加导出功能，即添加如下代码
同理，如果不想要导出功能，不引入exporting.js 即可，另外，禁用导出功能还可以通过设置 exporting.enabled = false，详见API
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 ，其他类型图表类似的也有
5、如何将图表中的英文汉化（显示成中文）？
即设置 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、怎么去掉曲线图的默认点击效果
设置states中的状态
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
}
8、跨图表类型下钻？（例：饼图下钻后以柱形图显示）
addSeries() 的时候设置下钻图表类型
chart.addSeries({
name: name,
data: data,
type: 'spline' // 设置数据列类型
color: color || 'white',
}, false);
9、highcharts下钻后，显示返回按钮？
drilldown组件自带的。其中按钮文字通过lang的drillUpText: String设置。
10、从左到右的动画效果；
设置 plotOptions.series.animation= false 即可，即
// 省略代码
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
plotOptions: {
series: {
animation: false
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
// ...
总结：
Highcharts官网API：https://api.hcharts.cn/
Highcharts官网示例：https://www.highcharts.com/demo