在微信小程序中使用 Highcharts

最新推荐文章于 2024-09-14 07:39:12 发布
最新推荐文章于 2024-09-14 07:39:12 发布
阅读量4.3k 收藏 2
点赞数 2
分类专栏： Highcharts 数据可视化图表控件 文章标签： Highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42125932/article/details/80338343
版权
本文介绍了如何在微信小程序中利用Web-view能力嵌入网页，从而使用Highcharts进行数据展示。开发者需要配置域名白名单，然后在小程序页面嵌入网页。通过JSSDK的postMessage实现小程序与网页的数据交互，但要注意web-view的一些限制，如仅支持特定类型的小程序和基础库版本。
摘要由CSDN通过智能技术生成

原文链接：https://blog.jianshukeji.com/2018/04/use-highcharts-in-wechat-miniprogram/

我们收到很多微信小程序开发者的反馈，表示强烈需要 Highcharts 进行数据展示。但是微信小程序不支持 DOM，并且没有暴露 SVG 相关的接口，所以截止到目前，我们无法直接在小程序中使用 Highcharts。

好消息是微信小程序开放了 Web-view 能力，也就是说支持网页嵌入。所以目前我们可以以嵌入网页的形式来实现在小程序上用 Highcharts 进行数据可视化。

体验示例小程序

Highcharts 示例小程序Highcharts 示例小程序

 

简单的开发示例

创建完小程序后，首先我们需要配置域名白名单，也就是嵌入网站所包含的资源的域名列表，配置位置： 【设置】-【开发设置】-【业务域名】</

最低0.47元/天 解锁文章
简数科技
关注
专栏目录
微信小程序开发中的用户行为统计和数据分析
wx_linying1029的博客
07-09 1193
通过收集和分析用户行为数据，开发者可以更好地了解用户的使用习惯和需求，优化用户体验，推进产品迭代。用户行为统计和数据分析是小程序开发中不可或缺的环节，只有通过实时的数据反馈，我们才能更好地了解用户需求，进而提供更好的产品和服务。用户行为统计和数据分析的重要性 在微信小程序开发中，用户行为统计和数据分析可以帮助开发者了解用户的使用习惯、喜好和需求，从而更好地优化产品和提供更好的用户体验。用户反馈收集：通过收集用户的意见和反馈，了解用户的需求和问题，从而对小程序进行优化和改进。用户行为统计和数据分析的重要性。
微信小程序是否支持highcharts或者echarts图表呢
細水、長流√的专栏
04-21 532
微信小程序是否支持highcharts或者echarts图表，最近在做一个显示图标的BI平台想用小程序来实现，不知道小程序是否支持这两种图表形式呢？ 现在echart 已经支持小程序，https://github.com/ecomfe/echarts-for-weixin/ 还有蚂蚁金服的数据可视化也有一个项目：https://github.com/antvis/wx-f2 这些都是“传统的（基于 DOM 的）”图表组件，小程序里不能用。 建议看看这个 https://github.co..
在微信小程序中使用ECharts图表库教程
最新发布
gitblog_00457的博客
09-14 1048
在微信小程序中使用ECharts图表库教程 echarts-for-weixin 项目地址: https://gitcode.com/gh_mirrors/ech/echarts-for-weixin ...
微信小程序 图表chart
JxufeCarol的博客
06-08 1234
参考链接： （1）在微信小程序中绘制图表（part1） https://segmentfault.com/a/1190000007649376 （2）在微信小程序中绘制图表（part2） https://segmentfault.com/a/1190000007696536 （3）在微信小程序中绘制图表（part3） https://segmentfault.com/a/1190000007876976 （4）wx-charts 微信小程序图表插件 https://www.cnblogs.com/xiaob
微信小程序引入echart图表
Dilemma_me的博客
10-14 1216
1.小程序开发环境，下载ECharts组件，gitHub地址：echarts-for-weixin 2.赋值ec-canvas文件 3…json 配置组件 { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }, "navigationBarTitleText": "客户报表" } 4…wxml...
canvas画条形图 微信小程序_在微信小程序中绘制图表（part1）
weixin_36328260的博客
12-30 999
微信小程序中图表现状由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。2、微信小程序API中提供了canvas的支持，利用canvas自行绘制图表。下...
HQChart使用教程13-5分钟完成一个小程序K线图
小银
06-11 6148
HQChart使用教程13-5分钟完成一个小程序K线图效果图下载HQChart组件配置 WXML配置页面js文件HQChart代码地址 效果图 下载HQChart组件 https://github.com/jones2000/HQChart 把 \trunk\wechathqchart 目录拷贝到小程序项目的目录里面。 配置 WXML 新建一个小程序页面， 在WXML里面增加一个’canvas...
Highcharts配置
scalad
09-12 713
Highcharts 的运行需要两个 JS 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。 引入 JS 文件可以是引入本地文件和在线文件，针对不同的 JS 框架需要引入的文件有所不同，下面详细说明。 一、引入在线资源 1、jQuery
微信小程序（数据可视化、Canvas、绘制线段、图形、太极图、文本、图像、渐变、变形）
weixin_48764743的博客
12-08 4410
一、数据可视化 1数据可视化概述 数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。 2应用场景 数据报表 特效制作 游戏开发 大屏展示 大屏展示目前在web前端开发中占比比较多，使用场景如下： (1)媒体大屏 适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口； (2)接待大屏 适用企业内部宣传专区，用于接待来访领导、客户或投资。 (3)监控大屏 针对企业运营或运维监控需求
【uniapp】uniapp开发移动端项目使用highcharts（蜘蛛图示例）
weixin_46682277的博客
08-20 1575
*第二步：**在UI界面中准备一个盒子来放图表。**第一步：**安装highcharts到项目。**第三步：**在需要展示图表的。方法中初始化图表，然后在。
微信小程序---ECharts
Html5随手札记
04-12 1万+
小程序中使用ECharts 动态加载数据 多个图表首先需要引入，下载地址 ecomfe/echarts-for-weixin 只需要拷贝这一个文件夹就OK了 放在你项目合适的位置，在使用的页面json进行配置，允许使用组件 ec-canvas ;//wxml 创建组件&lt;view class="container"&gt; &lt;ec-canvas id="mychart-dom...
(三)、使用HighCharts创建第一个图表实例
分享经验，共同进步.
04-15 3万+
在你的项目中引入上一篇中提到的js文件，项目根目录下新建一个JS文件夹，然后将前面下载的js文件放入该文件夹下，放入后的效果如下：  在前台aspx页面中，引入以上js文件，如下：  接下来，看下Script脚本中的内容：  var chart; $(document).ready(function () { chart =
在微信小程序中使用 ECharts
nmyangmo的专栏
03-01 7万+
ECharts 和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。 体验示例小程序 在微信中扫描下面的二维码即可体验 ECharts Demo： 下载 为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。 首先，下载 G...
微信小程序详细图文教程-10分钟完成微信小程序开发部署发布（3元获取腾讯云服务器带小程序支持系统）
热门推荐
wyx100的专栏
01-11 10万+
很多朋友都认为微信小程序申请、部署、发布很难，需要很长时间。 实际上，微信和腾讯云同是腾讯产品，已经提供了10分钟（根据准备资源情况，已完成小程序申请认证）完成小程序开发、部署、发布的方式。当然，实现的是基础功能。但是，可以给学习者很便捷的体验和很好的启发。 不过，随着微信平台和云服务的发展，真担心，程序猿会失业！ 案例下载： https://pan.baidu.com/s/1BQSb0B...
HighCharts初学____（1）
咸鱼的星空
12-30 5501
HighCharts初识 1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表 Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。 2、 Highcharts官网：http://www.highchart
微信小程序不支持图表工具，通过实例带你了解绘制方案
小秋博客
02-09 1622
作者：musiq1989，前端开发工程师，专注于前端技术研究和内容分享，Github地址：https://github.com/xiaolin3303。 责编：陈秋歌，关注微信开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.net。 欢迎加入“CSDN微信开发”群，与作者及更多专家、技术同行进行热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群，务必注...
微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles
快乐搞内核代码
07-18 3578
使用说明 安装 npm install gulp build 生成/Chart.js-master/dist/Chart.min.js文件 使用压缩合并版本 打开 dev/page/canvas/chart.js 注释 import Chart from ‘../../Chart.js-master/src/chart’ 开启 import Chart from ‘../../Cha...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值