程序员经验分享-hwhale

Axure嵌入Highcharts图表--javascript (js)注入

2023-05-16

前言

上次发现可以通过javascript(js)注入实现在Axure 里引用Echarts图表，提升原型展现能力，特别是在高保真原型。既然可以实现Echarts的图表引用，那么能否用同样的方法引用Highcharts图表。做了下测试，是可以的。下边简单讲下，方法和Echarts图表引用是差不多的。
本文原始地址： https://www.sima.link/axure嵌入图表之highcharts图表/ ‎

Highcharts图形生成

在Highcharts的官网上实现出想要的图表设计如下图，并复制好js代码；
在这里插入图片描述

Highcharts js注入

1、在axure界面里拖入矩形，并命名为“Charts” （可以自己定义名称，但要与js代码【data-label】里的一致)。
在这里插入图片描述

2、增加交互事件，【载入时】打开链接，【超链接到】写入javascript 的代码实现highcharts的引用(highcharts的代码复制出来)，如下图
在这里插入图片描述

通过axure自身的axutils.js实现js加载，其中javascript 的代码如下：

javascript:
$axure.utils.loadJS('http://cdn.highcharts.com.cn/highcharts/highcharts.js');
var dom =$('[data-label=Charts]').get(0);/* 矩形名称*/

setTimeout(function(){
/* highcharts 代码 替换掉'container'换成dom /
}, 2500);

3、点击预览就可看到引用hightcharts的效果
在这里插入图片描述

其他问题

1、unexpected end of input
a、很可能是你javascript 里有注释用的是“//XXXXXX”，要去掉，注释用“/xxxxxx/”的形式。
2、 “Uncaught TypeError: Cannot read property ‘getAttribute’ of undefinedat echart”出现这个问题时：
a、Axure矩形的名字与js代码里的矩形名称（data-label）的名字不一样；

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Axure

highcharts

javascript

Axure嵌入Highcharts图表--javascript (js)注入 的相关文章

  • Firebase HTTP Cloud Functions - 读取数据库一次

    我有 Firebase HTTPs 功能 该函数需要根据查询参数从 Firebase 数据库读取值 并根据该数据返回结果 Firebase JS SDK 表示要使用以下命令来执行此操作 return firebase database re

  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我

  • 引发一系列事件 Backbone event:name

    extend object Backbone Events object on myalert one function msg document body innerHTML eve1 msg msg name this name con

  • 从一个页面导航到另一个页面时，JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu

  • 克隆元素对应表单中所有元素的事件

    我成功克隆了表行 其中包含从数据库检索的值 不过我对它没有什么问题 我对所有元素使用了类 因为克隆会重复 ID 不会出现问题 因为它无法唯一地定位每个元素 使每个元素 行在这里唯一的方法是什么 功能如何工作 当第一次选择框时 所选 ID 的

  • 为什么Google的闭包库不使用真正的私有成员？

    我成为 JavaScript 开发人员已经有一段时间了 我一直认为在 JavaScript 中实现私有成员的正确方法是使用 Doug Crockford 在这里概述的技术 http javascript crockford com priv

  • 异步 JS 加载到 head 中

    我需要将脚本异步加载到页面上 我正在使用createElement方法在头部动态插入脚本标签 发生的事情是首先加载页面源 完成后 头部中包含的所有元素都会并行加载 一旦全部加载完毕 我动态添加的脚本就会加载 这在逻辑上是有道理的 但我正在寻

  • 监听外部事件。 Bash 到 NodeJS 的桥梁

    在 NodeJS 进程内部 我如何监听来自 bash 的事件 例如 NodeJS side obj on something function data console log data Bash side do something Hel

  • 根据用户的时间设置问候语（早上好，下午好......）

    任何人都可以推断如何根据用户的时间设置实现基本的 晚上好 或 早上好 也许 PHP 会获取服务器时间 但我希望用基于时间的适当问候语来问候网站访问者 并考虑到他们一天中的时间 E G 早上好 晚上好 下午好 基于它 getHours 日期对

  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p

  • React 功能组件：作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f

  • 检查某个元素是否在没有 jQuery 的情况下“聚焦”

    我几乎确信我能在这里找到答案 但我没有成功 您如何检查事件调用时是否选择 聚焦 某个对象 我试过if document activeElement object HTMLBodyElement 但显然 activeElementonLoad

  • Javascript 函数，我如何开始理解它们？

    我完全理解 为了学习 javascript 我需要知道函数是如何工作的 我了解传递参数的基础知识 然后使用值调用函数以将某些内容添加到一起 等等 我读过无数关于函数的文章 例如以及书籍等 但我只是不明白它们是如何使用的以及何时应该使用它们等

  • 什么是{| ... |} 在 JavaScript 中是什么意思？ [复制]

    这个问题在这里已经有答案了 通读 javascript 代码库 我遇到了如下代码块 export type RouteReducerProps error Error isResolving boolean isResolved boole

  • Angular2 - 防止复选框被选中

    我有一个每行包含一个复选框的表 在表头中 我有一个Check All切换所有表格行框的复选框 我正在尝试实现一些逻辑 如果复选框的数量将超过特定限制 则显示错误并且不切换表行复选框或checkall盒子本身 有一个问题允许checkAll即

  • 特别更改画布上的笔画不透明度，但不更改颜色

    我有一个漂亮整洁的脚本 可以循环显示颜色 并且与 xxxxxx格式 但我想改变透明度 有没有办法做到这一点 我指的是ctx strokeStyle 这是当前的代码 canvas strokeStyle 16777215 s length i

  • 如何应对 WebStorm 中大量未解决的变量警告？

    我有一个从服务器获取数据的函数 function getData data console log data someVar 网络风暴说someVar是一个未解决的变量 我怎样才能摆脱这样的警告 我看到几个选项 禁止 IDE 设置中的警告

  • 如何让 Grunt.js 和 Meteor.js 协同工作？

    我想在我的 Meteor 应用程序中使用简单的复制和串联 但是当 Meteor 在服务器和客户端上运行所有 javascript 文件时 我遇到了问题 而我不希望它们在任何地方运行 它要么只是配置文件 例如Gruntfile js或我想以某

  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var

  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • Go协程与协程池

    1 Golang协程 golang和其它语言最大区别莫过于goroutine xff0c 也就是go的协程 xff0c example如下 xff1a package main import 34 fmt 34 import 34 time

  • Go协程池设计思路(Task-Job-Worker)

    1 铺垫 xff1a Go 的接收器Receiver 在go语言中 xff0c 没有类的概念 xff0c 但是可以给类型 xff08 结构体 xff0c 自定义类型 xff09 定义方法 所谓方法就是定义了接受者的函数 接受者定义在func

  • 系统间通信1：阻塞与非阻塞式通信A

    版权声明 xff1a 本文引用https yinwj blog csdn net article details 48274255 从这篇博文开始 xff0c 我们将进入一个新文章系列 这个文章系列专门整理总结了目前系统间通信的主要原理 手

  • 系统间通信1：阻塞与非阻塞式通信B

    版权声明 xff1a 本文引用https yinwj blog csdn net article details 48274255 接上篇 xff1a 系统间通信1 xff1a 阻塞与非阻塞式通信A 4 3 NIO通信框架 目前流行的NIO

  • 系统间通信2：通信管理与远程方法调用RMI

    本文引用 https yinwj blog csdn net article details 49120813 RMI Remote Method Invocation xff0c 远程方法调用 RPC Remote Procedure C

  • 系统间通信3：RPC的基本概念

    本文引用 https yinwj blog csdn net article details 49453303 1 概述 经过了详细的信息格式 网络IO模型的讲解 xff0c 并且通过JAVA RMI的讲解进行了预热 从这篇文章开始我们将进

  • 系统间通信4：基本IO通信模型

    本文引用 https blog csdn net yinwenjie article details 48472237 目前常用的IO通信模型包括四种 xff1a 阻塞式同步IO 非阻塞式同步IO 多路复用IO和真正的异步IO 所有IO模式

  • 深入理解Golang中的Context包

    context Context是Go语言中独特的设计 xff0c 在其他编程语言中我们很少见到类似的概念 context Context深度支持Golang的高并发 1 Goroutine和Channel 在理解context包之前 xff

  • ubuntu —— 命令行访问网页

    span class hljs variable style margin 0px padding 0px span sudo apt get install w3m span class hljs variable style margi

  • VINS-Mono 加rgbd

    通过对比VINS Mono与其RGBD版本 xff0c 分析其改动思路 一 feature tracker feature tracker node cpp 头文件加入了ros的多传感器时间戳 include lt message filt

  • MFC使用HttpGet和HttpPost方法与服务器通信

    处理过程封装到CHttpClient类中 同时支持http和https HttpClient h cpp view plain copy HttpClient h ifndef HTTPCLIENT H define HTTPCLIENT

  • 【Micropython】肝货~使用USB_VCP通过USB串口与树莓派或PC端通信

    为什么要使用USB VCP xff1f Micropython有很多串口 xff0c 例如PYboard xff0c 有5个串口可以使用 xff0c 但是 xff0c 平时我们在做一些项目的时候 xff0c 需要使用的引脚较多 xff0c

  • npm 401 BASIC realm=“Sonatype Nexus Repository Manager“

    今天在做vue项目 切换私服nexus npm login时 遇到了下面的问题error Unable to authenticate need BASIC realm 61 34 Sonatype Nexus Repository Man

  • 通过HTTP协议利用VC++ POST通信开发

    转载地址 xff1a https blog csdn net lhsxsh article details 4200486 void CMFCForm1Dlg OnBnClickedOk TODO 在此添加控件通知处理程序代码 CDialo

  • java源码解析JavaParser

    package com bootdo jparser import java io File import java io FileNotFoundException import com github javaparser JavaPar

  • 关于串口通讯查询与中断两种方式

    串口通讯有查询与中断两种方式 2011 09 13 13 31 我们知道串口通讯有查询与中断两种方式 xff0c 但是对于两种方式的区别很多人并不是非常清楚 xff0c 对于两者的实现到底有和不同呢 xff1f 让我们简单的总结如下 xff

  • linux 下postgresql遇到几个问题

    问题1 xff1a Job for postgresql service failed because the control process exited with error code See 34 systemctl status p

  • ActiveMQ连接数过多，导致ActiveMQ无法正常接入数据

    ActiveMQ跑了一段时间 xff0c 会出现连接数据过多的报错 Could not accept connection org apache activemq transport tcp ExceededMaximumConnectio

  • Axure嵌入Echarts图表--javascript (js)注入

    前言 用Axure做Web原型设计时 xff0c 经常会有图表 特别是大屏可视化或者数据可视化的原型中就更为常见 传统的方法是通过既有的图形或者曲线加上文字来实现 由于Axure可以通过javascript注入 的方法进行简单的拓展 xff

  • Axure嵌入Highcharts图表--javascript (js)注入

    前言 上次发现可以通过javascript js 注入实现在Axure 里引用Echarts图表 xff0c 提升原型展现能力 xff0c 特别是在高保真原型 既然可以实现Echarts的图表引用 xff0c 那么能否用同样的方法引用Hig

热门标签