提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:杨鹏连|2020-09-07 09:55:21.320|阅读 212 次
概述:本文介绍了如何创建基本的维恩(或欧拉)图以及配置特定于该类型的设置。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
AnyGantt是基于JavaScript的高级解决方案,用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台,可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。
套装
Venn图的外观设置可以配置为三种状态:正常,悬停和选择。使用normal(),hovered()和selected()方法。
将它们与以下方法结合:
请注意,这些设置仅影响圈子。要了解如何调整相交区域,请参阅下一节。
在下面的示例中,有一个配置了外观设置的维恩图:
// configure the visual settings of the chart chart.normal().fill("#00cc99", 0.3); chart.hovered().fill("#00cc99", 0.1); chart.selected().fill("#00cc99", 0.5); chart.normal().hatchFill("percent50", "#004d39"); chart.hovered().hatchFill("percent50", "#004d39"); chart.selected().hatchFill("percent50", "#004d39"); chart.normal().stroke("#004d39"); chart.hovered().stroke("#004d39", 2); chart.selected().stroke("#004d39", 4);
交叉口区域可以配置为三种状态。将crosslines()方法与normal(),hovered()和selected()方法一起使用。
结合使用以下方法:
// configure the visual settings of intersections var intersections = chart.intersections(); intersections.normal().fill("green", 0.3); intersections.hovered().fill("green", 0.1); intersections.selected().fill("green", 0.5); intersections.normal().hatchFill("percent50", "white"); intersections.hovered().hatchFill("percent50", "white"); intersections.selected().hatchFill("percent50", "white"); intersections.normal().stroke("white"); intersections.hovered().stroke("white", 2); intersections.selected().stroke("white", 4);
您可以通过向数据中添加特殊字段来更改单个点(集合和相交点)的外观:
//create data var data = [ {x: "A", value: 100, normal: {fill: "#455a64 0.5"}, hovered: {fill: "#455a64 0.5"}, selected: {fill: "#455a64 0.5"} }, {x: "B", value: 100, normal: {fill: "#00bfa5 0.5"}, hovered: {fill: "#00bfa5 0.5"}, selected: {fill: "#00bfa5 0.5"} }, {x: "C", value: 200, normal: {fill: "#1976d2 0.5"}, hovered: {fill: "#1976d2 0.5"}, selected: {fill: "#1976d2 0.5"} }, {x: ["A", "B"], value: 10}, {x: ["B", "C"], value: 10, normal: {stroke: "2 white"}, hovered: {stroke: "2 white"}, selected: {stroke: "4 white"} } ]; // create a chart and set the data chart = anychart.venn(data);
标签和工具提示
标签是可以放置在任何图表上任何位置的文本或图像元素(您可以在整个系列或单个点上启用它们)。对于文本标签,可以使用字体设置和文本格式器。
甲工具提示是文本时的曲线图上的点悬停在显示框。有许多可视设置和其他设置:例如,您可以使用字体设置和文本格式化程序来编辑文本,更改背景样式,调整工具提示的位置等等。
代币
创建维恩图时,可以为圆和相交设置标签和工具提示。
要更改标签的文本,请将labels()和format()方法与标记结合使用,并配置工具提示,请对tooltip()和format()方法进行相同的操作。
使用交集()方法设置交集的标签和工具提示。
以下是适用于维恩图的标记:此外,您始终可以向数据添加自定义字段,并使用与之对应的自定义标记。
此示例显示了如何使用令牌://create data var data = [ { x: "A", name: "Set A", custom_field: "info 1", value: 100 }, { x: "B", name: "Set A", custom_field: "info 2", value: 100 }, { x: ["A", "B"], name: "Set A + Set B", value: 25 } ]; // create a chart and set the data chart = anychart.venn(data); // configure labels of circles chart.labels().format("{%name}\n\n{%custom_field}\n{%value}"); // configure labels of intersections chart.intersections().labels().format("{%name}\n\n{%value}"); // configure tooltips of circles chart.tooltip().format( "Set Info: {%custom_field}\nCardinality: {%value}" ); // configure tooltips of intersections chart.intersections().tooltip().format( "Intersection Info: {%custom_field}\nCardinality: {%value}" );
格式化功能
要配置标签和工具提示,可以使用格式化功能和以下字段:您还可以将自定义字段添加到数据中,并使用getData()方法对其进行引用。
在以下示例中,格式化功能用于仅在三个或更多圆的交点上显示标签,并在工具提示中显示交点数和自定义数据字段://create data var data = [ {x: "A", value: 100}, {x: "B", value: 100}, {x: "C", value: 100}, {x: ["A", "B"], value: 20, custom_field: "info 1"}, {x: ["A", "C"], value: 20, custom_field: "info 2"}, {x: ["B", "C"], value: 20, custom_field: "info 3"}, {x: ["A", "B", "C"], value: 20, "custom_field": "info 4"} ]; // create a chart and set the data chart = anychart.venn(data); // configure labels of intersections chart.intersections().labels().format(function() { if (this.x.length > 2) return this.x; }); // configure tooltips of intersections chart.intersections().tooltip().format(function() { return "Value: " + this.value + "\n(" + this.x.length + " sets intersecting)\n\n" + this.getData("custom_field"); });
APS是慧都科技15年行业经验以及技术沉淀之作,通过连接企业接单、采购、制造、仓储物流等整个供应链流程,帮助提升企业生产效率。
想要购买AnyGantt正版授权或慧都APS系统,或了解更多产品信息请点击
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢