在微信小程序中使用 Highcharts

最新推荐文章于 2022-08-20 17:50:49 发布

简数科技

最新推荐文章于 2022-08-20 17:50:49 发布

阅读量4.3k

点赞数 2

分类专栏： Highcharts 数据可视化图表控件文章标签： Highcharts

本文链接：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 示例小程序

简单的开发示例

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

简数科技

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序开发中的数据可视化与图表展示

wx_linying1029的博客

08-15

268

你可以根据自己的需求，使用微信小程序自带的图表组件或者第三方图表库，来展示不同类型的图表。你可以根据第三方库的使用文档，调整配置项和数据，实现不同类型的图表展示。你可以根据自己的需求，调整配置项和数据，实现不同类型的图表展示。微信小程序提供了一个基础的图表组件，可以用来展示柱状图、折线图、饼图等常见的图表类型。除了微信小程序自带的图表组件，还有一些第三方的图表库可以帮助我们更丰富地展示数据。在需要展示图表的页面的wxml文件中，添加图表组件。在需要展示图表的页面的wxml文件中，添加图表组件。

微信小程序开发中的用户行为统计和数据分析

最新发布

wx_linying1029的博客

07-09

1158

通过收集和分析用户行为数据，开发者可以更好地了解用户的使用习惯和需求，优化用户体验，推进产品迭代。用户行为统计和数据分析是小程序开发中不可或缺的环节，只有通过实时的数据反馈，我们才能更好地了解用户需求，进而提供更好的产品和服务。用户行为统计和数据分析的重要性在微信小程序开发中，用户行为统计和数据分析可以帮助开发者了解用户的使用习惯、喜好和需求，从而更好地优化产品和提供更好的用户体验。用户反馈收集：通过收集用户的意见和反馈，了解用户的需求和问题，从而对小程序进行优化和改进。用户行为统计和数据分析的重要性。

参与评论您还未登录，请先登录后发表或查看评论

微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles

快乐搞内核代码

07-18

3558

使用说明安装 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...

微信小程序是否支持highcharts或者echarts图表呢

細水、長流√的专栏

04-21

518

微信小程序是否支持highcharts或者echarts图表，最近在做一个显示图标的BI平台想用小程序来实现，不知道小程序是否支持这两种图表形式呢？现在echart 已经支持小程序，https://github.com/ecomfe/echarts-for-weixin/ 还有蚂蚁金服的数据可视化也有一个项目：https://github.com/antvis/wx-f2 这些都是“传统的（基于 DOM 的）”图表组件，小程序里不能用。建议看看这个 https://github.co..

微信小程序 图表chart

JxufeCarol的博客

06-08

1208

参考链接：（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

1197

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

977

微信小程序中图表现状由于微信小程序本身框架的限制，很难集成目前已有的图表工具，显示图表目前有两种方案：1、服务器端渲染图表，输出图片，微信小程序中直接显示渲染好的图片，比如highcharts提供了服务端渲染的能力hightcharts server render，这种方式需要后台有一套渲染服务，并且有一定的网络开销。2、微信小程序API中提供了canvas的支持，利用canvas自行绘制图表。下...

HQChart使用教程13-5分钟完成一个小程序K线图

小银

06-11

6086

HQChart使用教程13-5分钟完成一个小程序K线图效果图下载HQChart组件配置 WXML配置页面js文件HQChart代码地址效果图下载HQChart组件 https://github.com/jones2000/HQChart 把 \trunk\wechathqchart 目录拷贝到小程序项目的目录里面。配置 WXML 新建一个小程序页面，在WXML里面增加一个’canvas...

Highcharts配置

scalad

09-12

699

Highcharts 的运行需要两个 JS 文件， highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。引入 JS 文件可以是引入本地文件和在线文件，针对不同的 JS 框架需要引入的文件有所不同，下面详细说明。一、引入在线资源 1、jQuery

微信小程序（数据可视化、Canvas、绘制线段、图形、太极图、文本、图像、渐变、变形）

weixin_48764743的博客

12-08

4326

一、数据可视化 1数据可视化概述数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。 2应用场景数据报表特效制作游戏开发大屏展示大屏展示目前在web前端开发中占比比较多，使用场景如下： (1)媒体大屏适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口； (2)接待大屏适用企业内部宣传专区，用于接待来访领导、客户或投资。 (3)监控大屏针对企业运营或运维监控需求

【uniapp】uniapp开发移动端项目使用highcharts（蜘蛛图示例）

weixin_46682277的博客

08-20

1529

*第二步：**在UI界面中准备一个盒子来放图表。**第一步：**安装highcharts到项目。**第三步：**在需要展示图表的。方法中初始化图表，然后在。

微信小程序---ECharts

Html5随手札记

04-12

1万+

小程序中使用ECharts 动态加载数据多个图表首先需要引入，下载地址 ecomfe/echarts-for-weixin 只需要拷贝这一个文件夹就OK了放在你项目合适的位置，在使用的页面json进行配置，允许使用组件 ec-canvas ;//wxml 创建组件<view class="container"> <ec-canvas id="mychart-dom...

(三)、使用HighCharts创建第一个图表实例

分享经验，共同进步.

04-15

3万+

在你的项目中引入上一篇中提到的js文件，项目根目录下新建一个JS文件夹，然后将前面下载的js文件放入该文件夹下，放入后的效果如下：在前台aspx页面中，引入以上js文件，如下：接下来，看下Script脚本中的内容： var chart; $(document).ready(function () { chart =

微信小程序详细图文教程-10分钟完成微信小程序开发部署发布（3元获取腾讯云服务器带小程序支持系统）

热门推荐

wyx100的专栏

01-11

10万+

很多朋友都认为微信小程序申请、部署、发布很难，需要很长时间。实际上，微信和腾讯云同是腾讯产品，已经提供了10分钟（根据准备资源情况，已完成小程序申请认证）完成小程序开发、部署、发布的方式。当然，实现的是基础功能。但是，可以给学习者很便捷的体验和很好的启发。不过，随着微信平台和云服务的发展，真担心，程序猿会失业！案例下载： https://pan.baidu.com/s/1BQSb0B...

在微信小程序中使用 ECharts

nmyangmo的专栏

03-01

7万+

ECharts 和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。体验示例小程序在微信中扫描下面的二维码即可体验 ECharts Demo：下载为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。首先，下载 G...

HighCharts初学____（1）

咸鱼的星空

12-30

5489

HighCharts初识 1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表 Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。 2、 Highcharts官网：http://www.highchart

微信小程序不支持图表工具，通过实例带你了解绘制方案

小秋博客

02-09

1606

作者：musiq1989，前端开发工程师，专注于前端技术研究和内容分享，Github地址：https://github.com/xiaolin3303。责编：陈秋歌，关注微信开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.net。欢迎加入“CSDN微信开发”群，与作者及更多专家、技术同行进行热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群，务必注...

微信小程序开发全攻略：入门到精通

- 小程序不同于订阅号或公众号，它具有应用功能，可在微信“发现”界面的入口处找到，与App的界面和使用方式相似。 2. **微信小程序开发准备**： - 开发工具的使用是关键，讲解了如何下载和配置微信开发者工具，...