交互式维恩图怎么玩?这款Javascript/HTML5地图图表工具告诉你
myzbx 2025-04-27 15:05 5 浏览
维恩图是显示数据集之间关系的好工具,也是各种互联网模因的重要来源。
从amCharts 4.9开始,您可以在Web应用程序中添加出色的交互式维恩图。
点击“了解更多”立即体验吧!
amCharts 4更新列表
[4.9.5]-2020-03-03
新增
- 第三参数-force-添加到ChartCursor.triggerMove。如果设置为true,即使光标已经在同一坐标上,它也会触发与移动相关的所有动作。
修复
- 现在,从ExportMenu导出将防止光标(和相关的工具提示)在导出之前出现,因此它们不包含在导出的图像中。
- 从4.9.3开始,使用panBehavior = "rotateLongLat"在MapChart上平移无法正常工作。
- 如果在XYChartScrollbar中使用了已处置的序列,则该序列未正确删除。
- 设置了dx/dy且旋转!= 0的元素未在正确位置显示固定位置的工具提示。
- 更改tooltipText会导致隐藏工具提示(如果它已经可见)并且tooltipPosition设置为“pointer”。
- 图例位于右/左的XYChart无法正确定位valueLabel(如果与右对齐)。
- TreeMap图例无法正常运行。
[4.9.4]-2020-02-26
修复
- 如果设置了homeGeoPoint,则MapChart会出错。
- 如果光标留在绘图区域,则XYCursor悬停的项目符号不会重置。
[4.9.3]-2020-02-25
更新
- 如果当前正在拖动其他一些交互式元素,则MapChart将不会执行其平移行为(例如,拖动)。例如,如果您在地图上方有一个滚动条就很好。
修复
- 修复了snapToSeries的问题。
[4.9.2]-2020-02-25
新增
- 可访问性:图表的svgContainer的新方法:readereAlert(text)。调用时,将强制屏幕阅读器读出某些文本。
- velocityDecay已添加到ForceDirectedSeries。增加数量以减慢节点动态。
更新
- 辅助功能:如果启用了屏幕阅读器,它将在以下情况下通知用户:a)图例项目被触发;b)MapChart缩放级别更改。
- vXYCursor.snapToSeries现在接受一个系列数组,并将从该数组中存在的任何系列捕捉到最接近的数据点。
修复
- 现在,当鼠标指针离开iframe时,图表将正确脱离拖动的元素。
- 修复了法语,葡萄牙语翻译中的拼写错误。
- 在韩语翻译中添加了更多翻译提示。
- 当更新XYChartScrollbar本地数据中使用的序列时,不会更新Scrollbar中使用的克隆。
- Series.autoDispose设置被忽略。
- 修复了当使用非常小的数字时在某些浏览器(Safari,IE)上出现“精度超出范围”的错误。
- 可访问性:tabindex值的设置基本上不起作用。
- 值为空的渠道切片在左上角显示一个黑色小矩形,图例项未显示标记。
- 改进了多个ValueAxis之间的同步。
[4.9.1]-2020-02-14
新增
- 精度添加到MapLine(默认值为0.1)。如果设置了shortestDistance = true,则线将根据投影进行弯曲。如果精度大于直线端点之间的距离(度),则不会发生这种弯曲。将其设置为大数可获得完美的直线。
- 精度添加到MapPolygon(默认值为0.5)。多边形的边线根据投影而弯曲。如果精度大于侧面端点之间的距离(度),则不会发生这种弯曲。将其设置为大数可获得完美的直线。
修复
- JSON配置:通过id引用父对象现在不依赖于元素的顺序。
- 使用XYCursor时,系列元素(例如列)未调度“结束”事件。
- 当Legend触发将鼠标悬停在PieSeries切片(或其他PercentSeries)上时,该切片没有调度“结束”事件。
- 如果单击图例项以再次显示,则不显示隐藏的ForceDirectedNode(如果使用API隐藏)。
- 路径适配器不适用于Sprite。
- v使用带有一系列序列的XYChartScrollbar将数据添加到XYChart有时会导致JS错误(如果缺少某些数据)。
- 将AxisBreak添加到CategoryAxis可能会导致JS错误。
- 没有将groupFields复制到XYChartScrollbar中的系列或任何其他克隆的系列。
- 如果在设置禁用属性字段时已禁用项目符号,则该项目符号在数据更改后无法正确更新。
[4.9.0]-2020-02-09
新增
- 新插件:维恩图。
- 添加了ForceDirectedSeries.dragFixedNodes属性(默认为false)。
- 添加了ForceDirectedSeriesDataItem.percent获取器。
修复
- 在非常旧的(59之前的版本)FireFox中,鼠标交互无法正常工作。
- 动态更改ForceDirectedSeriesDataItem.fixed无法正常工作。
- CirclePattern尚未被全局导出。
- 在某些不可见的元素上设置expoirtable = false有时会导致它们在导出后变得可见。
[4.8.9]-2020-02-07
新增
- 添加了Scrollbar.isBusy getter,当用户与Scrollbar交互时为true。
- RadarColumnSeries现在支持两个类别轴。
- angleToPosition(angle)已添加到AxisRendererCircular。
- currentPosition吸气剂添加到ClockHand。
修复
- 自从升级canvg版本以来,在IE上的导出(以及其他带有simplifiedExport = false的设置)已损坏。
- 当DateAxis分组设置为true时,在某些情况下,数据更新后,值轴的缩放不正确。
- 在某些特定情况下,将数据添加到图表时,带有系列的XYScrollbar可能会产生JS错误。
- 数据更新后,渠道系列sliceLink可能会失去其颜色。
[4.8.8]-2020-02-05
修复
- 使用分类的列缩放CategoryAxis时,未显示某些列。
[4.8.7]-2020-02-05
新增
- 将sortBySeries属性添加到CategoryAxis。如果将其设置为ColumnSeries的实例,则轴将根据实际系列的值自动对其类别进行排序。
修复
- 末尾带有额外换行符的标签有时可能会继承多文本以前版本的内容,例如 在动态更新的工具提示中。
[4.8.6]-2020-01-31
修复
- 数据项值为0的树图导致错误
- 带有分组数据的DateAxis的ZoomToDates并不总是正常工作。
- 延伸系列时,不会克隆PercentSeries的color ColorSet,因此克隆的系列使用单个Colorset会产生不同的颜色。
- dateAxis.timezoneOffset的值0不能正常工作。默认值从0更改为undefined。
新增
- 将cloneTooltip标志(默认值为true)添加到Sprite。克隆元素时,如果模板已分配了自己的工具提示,则默认情况下也会克隆此工具提示。这对cpu不利,有时对于所有克隆您可能只需要一个工具提示。将cloneTooltip设置为false以便不克隆工具提示。
[4.8.5]-2020-01-29
修复
- 恢复了DateFormatter.timezoneOffset的旧行为,因为4.8.3中引入的修复程序不正确。请改用dateAxis.timezoneOffset。
- 可以仅固定ForceDirectedSeries的第一级的节点。
- 在将序列添加到序列表中或从序列图中删除序列时,它仅将特定项目添加到图例中/从图例中删除特定项目(如果有),以前用于使整个图例无效,这不利于性能。
新增
- 将timezoneOffset属性添加到DateAxis。如果您的日期是数据中的时间戳,并且无论图表查看器在哪个时区,您都希望图表显示相同的日期,请使用它而不是DateFormatter.timezoneOffset。
- 如果ValueAxis设置了calculateTotals = true,则该轴不仅将计算相关系列数据项的total和totalPercent,而且还将计算sum,它是值的来源的数学和,而不是其绝对值。
[4.8.4]-2020-01-25
修复
- 降级为TypeScript 3.6,以避免TS 3.7中引入的重大更改。
[4.8.3]-2020-01-24
新增
- 新的ValueAxis设置:extraTooltipPrecision。将其设置为额外的小数位数,以用于当前轴标签精度之上的轴工具提示中的数字。默认值为0。
修复
- ValueAxis网格的同步得到改善。
- 使用timezoneOffset会错误地影响DateAxis的标签。
- 如果在隐藏的容器中初始化了MapChart,则随后的zoomToMapObject()调用将错误地缩放。
[4.8.2]-2020-01-23
新增
- 添加TreeMap.homeDataItem获取器。
修复
- 有时标签没有被正确地截断。
- 值< 1的ValueAxis可能不会显示标签(仅从4.8.1开始)。
- 如果未使用动画主题,则轴同步在初始视图上不起作用。
- 有时,未定义的变量会以默认状态恢复,而不应该恢复为默认状态。这是在4.8.1中引入的。
[4.8.1]-2020-01-22
新增
- 新设置syncWithAxis已添加到ValueAxis。用它在两个或多个轴之间同步网格。将其设置为另一个ValueAxis的引用,即与之同步网格的引用。
更新
- 恢复默认状态后,它也不会设置具有未定义值的属性。它曾经忽略那些。
- 现在,XYCursor在计算是否移动时会考虑其行为逻辑。例如,如果behavior == "zoomX",则它仅在确定光标是否移动时才测量水平距离。
修复
- 注释插件:设置currentTool属性不适用于“line”和“arrow”。
- 有时,应用响应规则时,元素属性未恢复到其原始值。
- 有时,在挖洞至最高级别后,TreeMap上的某些项目符号没有显示出来。
- 在ValueAxis上设置fontSize会导致错误。
[4.8.0]-2020-01-16
新增
- 可滚动(默认:false)属性添加到图例。如果图例位于左侧/右侧,并且项目不适合可用高度,则滚动条将自动出现。如果图例位于顶部/底部,则必须为图例设置maxHeight,并且如果项目不适合此高度,则会出现滚动条。
- 注释插件:添加了新属性useMenu。如果设置为false,则插件将不会添加任何项目或创建导出菜单。这意味着注释功能仅可通过其API使用。
- 注释插件:添加了箭头工具支持。
更新
- 图例项目的布局算法已更改并变得更好。如果标签不合适,则将其正确截断。价值的一致性很好。
- 当图例的位置为“左”或“右”时,它不再将其宽度固定为200px宽度,而是将maxWidth设置为220。这意味着图例将仅采用容纳其内容所需的宽度,这通常会导致图表本身有更多空间。如果要显示所有标签,则将maxWidth设置为undefined,如果不合适,则不要将其截断。
- 当图例的位置为“左”或“右”时,它将自动将maxColumns设置为1(一),以便图例项仅排列在一列中。如果需要更多列,则可以更改此设置(应在设置位置后执行此操作)。
- 现在,在元素上设置focusable = true将自动设置tabindex =0。这对于某些浏览器(FF)是必需的,以使元素可聚焦。这意味着默认情况下可聚焦的一堆元素(图例项目、夹点、按钮等)现在也将自动设置tabindex。
- Label.ellipsis(在截断文本时使用)的默认值已从“...”(三个点)更改为“…”(Unicode字符“水平椭圆”;U + 2026)。
- 标签包装现在将尝试不将字符串拆分为之后没有空格的点,例如 “55.5%”。
修复
- 调整图表大小后,轴填充未正确测量,这可能会导致工具提示显示在错误的位置。
- 如果直接在valueLabels.template.text上设置,则不会显示图例的valueLabels。仅当在series.legendSettings.itemValueText上设置时,它们才会显示。
[4.7.21]-2020-01-10
新增
- 将updateStacking()方法添加到XYSeries。如果某些堆积属性通过堆积保持时间更改为真,则必须调用。
- 向SunburstChart的dataField中添加了“hidden”,以便可以预隐藏某些切片。
修复
- 如果相关系列的视觉设置发生更改,则禁用系列的图例标记将重置为默认视图。
- 使用隐藏的堆叠序列更改图表上的数据会导致错误的堆叠。
- 如果删除了序列,XYChart不会更新值轴的最小值/最大值。
- 如果使用“硬”粘贴选项通过API移动了光标,则在绘图区之外单击时,光标可能会动画到某个错误的位置。
- 从百分比到数字或从数字到数字的动画根本不起作用,例如 在应用状态时。现在,它将不使用动画翻转到最终值。
[4.7.20]-2020-01-08
修复
- 使用DateAxis和groupData = true更改图表的数据并自定义baseInterval导致分组无法正常工作。
- 图表创建后更改颜色和一系列其他视觉属性不会影响LineSeries和ColumnSeries及其图例标记。
- 有时,图表的活动工具提示会被隐藏,即使它应该保持可见(如果此刻还隐藏了其他子画面)。
[4.7.19]-2020-01-07
新增
- 注释插件:添加了实验设置autoSize(默认值:false)。如果设置为true,它将在更改时尝试相对于图表大小重新定位注释。
修复
- 使用具有非整数alpha的颜色更改填充/描边属性会导致完全不透明或完全透明的颜色。
- 有时ColumnSeries3D的列顺序已关闭。
- 超宽/高图(超过100K像素)上的XYSeries被扭曲。
- 回归插件:没有直接为回归系列更新数据,导致其无效。
- 图表初始化后,无法将DateAxis上的groupData从初始false切换为true。
- 将DateAxis上的groupData从初始的false切换为true,将导致iValueValue刻度不正确。
- 如果由于alwaysShowTooltip = true而显示了工具提示,则该工具提示过去在放置精灵后仍保持可见。
- 如果将数据更新为空数组,则不会触发datavalidated和beforedatavalidated事件。
- 在XYSeries上从true切换为false不能正确进行切换。
- Component.removeData()导致所有数据无效,从而导致某些错误行为。
- 如果更改了某种格式(数字格式器),则必须立即调用invalidateLabels()才能应用新格式。
- DurationAxis现在以与DateAxis相同的方式为新添加的数据设置动画。
- 一次向XYChartScrollbar添加/删除多个系列可能会导致错误。
点击“了解更多”立即在你的Web应用程序中添加出色的交互式维恩图。
相关推荐
- 以文本的方式绘制简单的SVG流程图——flowchart.js
-
介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...
- 全国首套构网型SVG在木垒投运
-
中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...
- Popmotion – 小巧,灵活的 JS 运动引擎
-
Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...
- 零基础教你学前端——43、初识SVG
-
解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...
- 2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
-
2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...
- vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!
-
前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...
- 一篇文章带你了解SVG 蒙版(Mask)
-
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...
- SVG实现的流程图绘制
-
一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...
- 解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享
-
前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...
- 交互设计师做好动画后,提交给开发的文档有哪些?
-
谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...
- Motion for Vue:为Vue量身定制的强大动画库
-
在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...
- Web开发人员的福音!8个实用的SVG工具
-
SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...
- 一键画波浪线、一键多图片调色?这3个网站好玩到停不下来
-
作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...
- vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!
-
Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...
- DrawSVG – SVG 路径动画 jQuery 插件
-
jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)