思享工具箱

前端12 highcharts和echarts选择

摘要：
虽然都是基于html的canvas画布进行开发的，echarts图标毕竟是基于MVC结构的图形开发包ZRender的基础上进行的，所以各方面还是考虑比较成熟的。Highcharts优点：轻量级，移动端使用比较流畅，毕竟小。并不是说echarts就没有，而是Hcharts确实更加详细，实例更多，方便观看，这点对我们初学者来说是十分必要的。Highcharts缺点：中文文档欠缺。因此在绘制地图方面，Echarts略胜一筹。一个很恰当的比喻：Highcharts和Echarts就像是Office和WPS、苹果和小米的关系。

运行测试https://jshare.com.cn/github/highcharts/highcharts/tree/master/samples/stock/chart/title-align/

https://bbs.hcharts.cn/forum.php 中文论坛hightcharts series接收数据

https://api.highcharts.com.cn/highstock#title.align highchart文档HighchartsHighstockHighmaps最新文档（英文）

https://www.cnblogs.com/xinxihua/p/14603861.html 前端12 highcharts和echarts选择

https://www.highcharts.com.cn/demo/highcharts 实例

https://github.com/ 代码托管

https://c.runoob.com/front-end/854


github/highcharts
bbs.hcharts.cn 中文论坛hightcharts series接收数据
api.highcharts.com highchart文档HighchartsHighstockHighmaps最新文档（英文）
www.cnblogs.com ;前端12 highcharts和echarts选择
www.highcharts.com ;实例
github.com 代码托管
;https://c.runoob.com/front-end/854

echarts 与 hightcharts 都支持哪些图标类型？

前端12 highcharts和echarts选择第1张

虽然都是基于html的canvas画布进行开发的，echarts图标毕竟是基于MVC结构的图形开发包ZRender的基础上进行的，所以各方面还是考虑比较成熟的。

Highcharts优点：

  1. 轻量级，移动端使用比较流畅，毕竟小。
  2. 基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图。
  3. 图表展现美观简约大气。
  4. 稳定的性能，非常适合用于为用户制定个性化图表，但更强的专业性也就意味着更高的学习成本，仁者见仁智者见智吧。
  5. 兼容性好，官方说兼容到IE6，实际我们只要兼容到IE8就基本满足。
  6. 完整的实例演示，功能介绍和详细的api文档。并不是说echarts就没有，而是Hcharts确实更加详细，实例更多，方便观看，这点对我们初学者来说是十分必要的。

Highcharts缺点：

  1. 中文文档欠缺。
  2. 百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面，Echarts略胜一筹。

一个很恰当的比喻：Highcharts 和 Echarts 就像是 Office 和 WPS 、苹果和小米的关系。不过这也是暂时的，相信Echarts会做得更好.

echarts底层为canvas，highcharts底层为svg
canvas特点：

①依赖分辨率
②不支持事件处理器
③弱的文本渲染能力
④能够以.jpg、.png格式保存结果图像
⑤最适合图像密集型的游戏，其中的许多对象会被频繁重绘

svg特点：
①不依赖分辨率
②支持事件处理器
③最适合带有大型渲染区域的应用程序（如谷歌地图）
④复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
⑤不适合游戏应用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style>
/* css 代码 */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/cylinder.js"></script>
</head>
<body>
<div id="container"></div>
<script>

var dis=[166.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
Highcharts.chart('container', {
chart: {
type: 'cylinder',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Highcharts 3D 圆柱图'
},
plotOptions: {
series: {
depth: 25,
colorByPoint: true
}
},
series: [{
data: dis,
name: 'Cylinders',
showInLegend: false
}]
});

</script>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style>

#container {
min- 300px;
max- 800px;
height: 500px;
margin: 0 auto;
border: 1px solid silver;
}

</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/sankey.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

</head>
<body>
<div id="container"></div>

<div id="container1"></div>

<div id="container2"></div>

<script>
var chart = Highcharts.chart('container1', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
viewDistance: 25,
depth: 40
},
marginTop: 80,
marginRight: 40
},
title: {
text: '以年龄段划分消费总量'
},
xAxis: {
categories: ['移网', '宽带', '融合', '金融', '家互']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: '群体数量'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: '小张',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: '小王',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: '小彭',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: '小潘',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});

</script>

<script>Highcharts.chart('container', {
title: {
text: '济宁联通数字化 Highcharts 桑基图'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['巴西', '葡萄牙', 5 ],
['巴西', '法国', 1 ],
['巴西', '西班牙', 1 ],
['巴西', '英国', 1 ],
['加拿大', '葡萄牙', 1 ],
['加拿大', '法国', 5 ],
['加拿大', '英国', 1 ],
['墨西哥', '葡萄牙', 1 ],
['墨西哥', '法国', 1 ],
['墨西哥', '西班牙', 5 ],
['墨西哥', '英国', 1 ],
['美国', '葡萄牙', 1 ],
['美国', '法国', 1 ],
['美国', '西班牙', 1 ],
['美国', '英国', 5 ],
['葡萄牙', '安哥拉', 2 ],
['葡萄牙', '塞内加尔', 1 ],
['葡萄牙', '摩洛哥', 1 ],
['葡萄牙', '南非', 3 ],
['法国', '安哥拉', 1 ],
['法国', '塞内加尔', 3 ],
['法国', '马里', 3 ],
['法国', '摩洛哥', 3 ],
['法国', '南非', 1 ],
['西班牙', '塞内加尔', 1 ],
['西班牙', '摩洛哥', 3 ],
['西班牙', '南非', 1 ],
['英国', '安哥拉', 1 ],
['英国', '塞内加尔', 1 ],
['英国', '摩洛哥', 2 ],
['英国', '南非', 7 ],
['南非', '中国', 5 ],
['南非', '印度', 1 ],
['南非', '日本', 3 ],
['安哥拉', '中国', 5 ],
['安哥拉', '印度', 1 ],
['安哥拉', '日本', 3 ],
['塞内加尔', '中国', 5 ],
['塞内加尔', '印度', 1 ],
['塞内加尔', '日本', 3 ],
['马里', '中国', 5 ],
['马里', '印度', 1 ],
['马里', '日本', 3 ],
['摩洛哥', '中国', 5 ],
['摩洛哥', '印度', 1 ],
['摩洛哥', '日本', 3 ]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});

</script>

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/sankey.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>

<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

</body>
</html>

标签：#highcharts#前端开发#https | 浏览：311 | 发布日期：

免责声明：文章转载自《前端12 highcharts和echarts选择》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇注册表里如何添加开机启动项Error invoking SqlProvider method (com.github.abel533.mapper.MapperProvider.dynamicSQL). Cause: java.lang.InstantiationException: com.github.abel533.mapper.MapperProvider下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

https证书设置以及设置301跳转

https证书设置以及设置301跳转 1、在Nginx的安装目录下创建cert目录，并且将下载的全部文件拷贝到cert目录中。 2、打开 Nginx 安装目录下 conf 目录中的 nginx.conf 文件，找到： HTTPS server server { listen 443; server_name localhost; ssl on; ss...

vue之vue-cookies

npm链接：https://www.npmjs.com/package/vue-cookies 安装: npm install vue-cookies --save 使用：main.js引入 import Vue from 'Vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies) Ap...

Android抓包方法(转)

Android抓包方法(转) 作者：Findyou 地址：http://www.cnblogs.com/findyou/p/3491014.html 前言： 做前端测试，基本要求会抓包，会分析请求数据包，查看接口是否调用正确，数据返回是否正确，问题产生是定位根本原因等。 不管是之前做HTML5手机项目测试，还是现在的企邮app测试，经常需要抓包，做前端开...

Tomcat配置https环境（Windows+Linux）

[-] 1进入到jdk下的bin目录 2输入如下指令keytool -v -genkey -alias tomcat -keyalg RSA -keystore dtomcatkeystore 3输入keystore密码 4输入名字组织单位组织市省国家等信息 5输入之后会出现确认的提示 6输入tomcat的主密码 7进入tomcat文件夹 8在seve...

死锁问题------------------------INSERT ... ON DUPLICATE KEY UPDATE*(转)

前言    我们在实际业务场景中，经常会有一个这样的需求，插入某条记录，如果已经存在了则更新它如果更新日期或者某些列上的累加操作等，我们肯定会想到使用INSERT ... ON DUPLICATE KEY UPDATE语句，一条语句就搞定了查询是否存在和插入或者更新这几个步骤，但是使用这条语句在msyql的innodb5.0以上版本有很多的陷阱，即有可能导...

Android、iOS、和Web如何做灰度发布？

    主要参考了：     https://www.zhihu.com/question/21714205     https://www.zhihu.com/question/28296375  一、概述     所谓的灰度发布，在行业内叫做A/B Test，所以可以搜索一些这方面的关键词     下面是某公司的灰度发布流程，仅供参考。 一）经典...

最新文章

随机推荐

思享工具箱导航