专栏首页码神联盟【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?

【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?

不是说下大雨吗?玩儿呐?搁哪呢?大雨搁哪呢?下丢啦?哗啦到海里去啦?让五娃给吞啦?南方整的那老大,看不起副中心咋的?还能不能 雨~露~均~沾~?你说我小船儿都买好了,搁哪划,搁哪划!!给我一个完美的解释!

北京气象局通知: 原约定于昨天和今早来的暴雨,因办进京证,耽误了点儿时间,或许今天夜间赶到。这场雨如果下大了肯定不小,如果下小了也肯定不会大,请市民再耐心等待!具体情况等下完后气象台会报给市民。气象台温馨提醒:今天如果不下雨,明天不下雨的话,这两天就没有雨了,就看后天的了。 气象台郑重劝告美女们最近几天不要穿裙子,容易被撩,雨是好雨,但风不正经!

今天早上,这两条段子又在朋友圈以及各大评论网站火了一把,原定于昨天傍晚到今天的暴雨,迟迟未到,朋友们都“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

本文分享自微信公众号 - 码神联盟(lkchatspace)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 考研英语-1-导学

    英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

    用户1335799
  • 知识体系解决迷茫的你

    最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

    桃翁
  • 中国互联网协会发布:《2018中国互联网发展报告》

    在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

    钱塘数据
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 理工男图解零维到十维空间,烧脑已过度,受不了啦!

    让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

    钱塘数据
  • ISUX Xcube智能一键生成H5

    腾讯ISUX
  • 【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

    腾讯高校合作
  • 不只是软件,在线也可以免费下载百度文库了。

    不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

    课代表

扫码关注云+社区

领取腾讯云代金券