Highcharts 6 发布啦

Highcharts 6 发布啦

经过一年多的开发和测试,我们很高兴的宣布 Highcharts 6 发布啦,一同发布的还有 Highstock 6 及 Highmaps 6。

大量的新的图表类型

Highcharts 6 提供 15 种新的图表类型,包括:桑基图流图旭日图可变宽度的柱形图平行坐标图可变宽度的环形图向量图风羽图贝尔曲线柏拉图词云图简易甘特图子弹图砖块图直方图 等,另外还有其他的图表类型将在接下来的几个月内发布,包括 韦恩图、 Marimekko 图等。

Highcharts 轮播(Motion)插件

Highcharts 轮播插件 是用来实现图表数据轮播的插件,先来看几个例子:

<iframe width=”100%” height=”540” style=”border: 1px solid #ccc”src=”https://code.hcharts.cn/highmaps/FSSm7A/58/share/pure" allowfullscreen=”allowfullscreen” frameborder=”0”>

基于 Highmaps 查找经纬度点所在的区域

基于 Highcharts 的官方教程 我们可以很轻松的通过经纬度定位点,也很轻松的用眼睛看出其所在区域,但是如何用代码实现这个看的过程呢?

如何用代码实现“看出”点所在的区域呢

在 Vue 中使用 Highcharts

在 Vue 中使用 Highcharts

实例代码及运行过程

请通过这个链接下载实例代码包:https://data.jianshukeji.com/upload/20170907/yvwmwm.zip

下载后解压并进入实例代码目录,执行 npm install 安装相关依赖,并通过 npm run dev 查看运行效果,如下图所示:

GBK 页面导出 Highcharts 图表乱码解决办法

Highcharts 官方提供的导出服务器(https://export.highcharts.com.cn) 默认只支持 UTF-8 编码,如果从 GBK 页面提交导出请求,导出的结果是包含乱码的图片,这是很常见的编码问题。

在不能改变页面编码的情况下,解决办法有两种:

  1. 修改导出服务器源码(源码可以到 node-export-server 下载,详见 教程)使其能够支持 GBK 编码
  2. 另外一种方法是将发送到导出服务器的数据改成 UTF-8。

Highcharts 性能提升模块

Highcharts 性能提升模块(boost.js) 是官方发布的用于提升性能的模块,可以轻松的让 Highcharts 加载十万、百万级的数据,下面是一个 Highcharts 加载 50 万数据的例子:

在 React 及 Webpack 中使用 Highcharts

实例代码及运行过程

请通过这个链接下载实例代码包:https://pan.baidu.com/s/1o7IZfiM 提取码:ktrc

下载后进入实例代码目录,执行 npm install 来安装相关依赖,并通过 npm run build 将源代码打包。

在 ionic 中使用 Highcharts

在 ionic 中使用 Highcharts

环境准备

通过下面的命令安装 ionic 及相关依赖包,其中 cordova 是用来将 web 资源(包括 HTML、SCSS、Typescript)转换成 Native 应用的包

npm install ionic cordova -g

创建 ionic 项目

ionic start highcharts-ionic blank

简单说明如下

  • highcharts-ionic 为项目名称,并且会创建对应的目录
  • blank 为 ionic 模板名,即用 blank 模板创建项目
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×