首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于HTML5 Canvas的3D动态Chart图表

发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的...看到有一个网站上在卖的图表,感觉挺好看的,就用 HT for Web 3D 做了一个小例子,挺简单的,也挺好看的,哈哈~ Demo 地址: http://www.hightopo.com/demo/WireframeAnim...g3d.setEye(0, 185, 300); 4 g3d.addToDOM(); 5 g3d.getView().style.background = '#000'; 接着就是造这五个chart图表条了...最后,要动态的变化 chart 图表中的柱形图,我们得设置动画,并且将 3d 字体也同步更新数值: 1 setInterval(function(){ 2 if(node.a('myHeight

1.9K70

矢量Chart图表嵌入HTML5网络拓扑图的应用

使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是也不是没有解决方案...各个模块间的矢量描述还是比较清晰的,具体可以参考 HT 的矢量手册,看到如此长的代码,我自己都没信心去维护它,维护这样的代码纯粹是体力活,而且复用性也不高,每一个不同的 Chart 都要类似如此地绘制,绘制一两个这样的图表感觉还好...在其他的图表中,可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上,并在定义 chart 时使用上如下代码就可以实现坐标文本的效果: ht.Default.setImage('chartName...但是,这样但使用方法总刚觉有些别扭,明明坐标轴是 Chart 的一部分,在定义 Chart 上却要硬生生地将图表和坐标部分分开,那如果用户还要在定义标题、坐标刻度、坐标说明等需求,那这个方案还是无法爽快的解决大部分通用的需求

86530
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    矢量Chart图表嵌入HTML5网络拓扑图的应用

    使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是也不是没有解决方案...各个模块间的矢量描述还是比较清晰的,具体可以参考 HT 的矢量手册,看到如此长的代码,我自己都没信心去维护它,维护这样的代码纯粹是体力活,而且复用性也不高,每一个不同的 Chart 都要类似如此地绘制,绘制一两个这样的图表感觉还好...在其他的图表中,可以将横轴和纵轴的文本内容设置到 data 的 attr 属性上,并在定义 chart 时使用上如下代码就可以实现坐标文本的效果: ht.Default.setImage('chartName...但是,这样但使用方法总刚觉有些别扭,明明坐标轴是 Chart 的一部分,在定义 Chart 上却要硬生生地将图表和坐标部分分开,那如果用户还要在定义标题、坐标刻度、坐标说明等需求,那这个方案还是无法爽快的解决大部分通用的需求

    1.6K60

    Excel图表学习45: 裁剪图表

    如下图1所示,在使用柱形图制作图表时,如果有些柱形表示的数字很大,可以截断该柱形,使图表看起来更美观。 ? 图1 注意,将图表裁剪或者是将Y轴的图形截断会让人产生误解或者混淆,因此,请谨慎使用。...图6 在该系列上单击右键,选择“更改系列图表类型”,在图7所示的“更改图表类型”对话框 中,将该系列更改为“带数据标记的折线图”。 ? 图7 将该系列的线条设置为“无线条”,结果如下图8所示。...选取图表中新添加的标记系列,按Ctrl+V组合键粘贴刚才复制的形状。此时,图表如下: ?...图9 步骤5:格式化图表图表中的上下柱形设置为相同的颜色,调整柱形之间的间隙,删除垂直坐标轴,修改图表标题,等等。结果如下图10所示。 ?...图12 至此,图表制作完成! 再次声明,除非迫不得已,不要滥用这样的图表,它会让数据展示“失真”。我们这里只是用于学习Excel图表的制作技巧。

    2.4K30

    图表搬家

    今天给大家聊一聊Excel图表的输出! 我们日常所做的图表,如果不是专门用做Excel报表的话,大部分还是要以图片的形式导出。...可能大家会觉得小魔方小题大做,不就是把图表从Excel转移到PPT中嘛,我也会呀。...其实有很多种相对比较科学的导出方式,下面就介绍给大家几种常见的图表导出方式: ▌如果是在同一工作薄的不同工作表之间移动图表的话,直接复制黏贴是没有问题的,也可以使用图表工具(点击图表才会显示)——设计—...—移动图表,可以自定义移动位置。...随便找一个空白位置点击释放 放置的图表千万不要遮挡源区域,否则 遮挡部分会“乱入”到图表里 (照相机默认复制的图表对象是带黑色边框的可以自己取消掉) ?

    2.3K80

    Excel图表技巧10:快速调整图表数据

    我们今天介绍的技巧是通过鼠标可以快速调整图表数据,而图表自身也会作出相应的调整。 如下图1所示,根据示例数据,创建了一个柱状图。 ? 图1 此时,如果我们要将数据换成B部门,很简单!...首先,选择图表,此时相应的图表数据也会自动选择,如上图1所示。 接着,将鼠标移至A部门所在的数据列,当光标变成十字方向箭头时,拖动使得红色和蓝色选择区域至B部门,图表也相应更新,如下图2所示。 ?...图3 你可以使用这种技巧快速制作4个部门的图表。 首先,将当前图表复制3份并排列整齐,如下图4所示。 ? 图4 然后,选择右上角的图表,按照上文所述的方法将数据拖到B部门,结果如下图5所示。 ?...图5 同理,更改下面两个图表的数据,结果如下图6所示。 ? 图6 小结:在绘制图表时,拖动鼠标对数据或图表元素进行调整是一种常用操作。

    2.7K30

    HTML5html5开篇基础(3)

    在 HTML 中,可以使用

    标签创建表格,并通过 rowspan 和 colspan 属性来合并单元格。

    7010

    Excel图表技巧03:另类组合图表

    通常,我们指的组合图表是在一个图表中放置不同类型的图表,例如常见的柱形图/折线图组合,如下图1所示,是由一个柱形系列和一个折线系列组成的。 ? 然而,我们也可以将几个图表叠加起来,模拟组合图表。...实际上,这是由两个单独的图表叠加在一起组成的。 ? 柱形图在标题和图形之间留出足够的空白空间,将圆环图放置在该处,如下图3所示。 ?...在准备好两个图表后,将另一个图表拖至该图表的空白处,并设置其置于“置于顶层”。至此,两个图表的组合就做好了。...有时候,这种方法很有用,可以避免图表系列之间的相互影响,可以解决一些不能放在同一图表中的图表类型的问题,调整格式和布局可能会更方便。 欢迎在下面留言,完善本文内容,让更多的人学到更完美的知识。

    1.3K30

    Excel最强图表插件EasyShu: 类别型图表

    历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。...我们先从与表格完美融合的类别型图表开始讲解。 类别型图表,主要是指类别型数据+数值型数据两个维度的图表,我们一般使用条形图、横棒棒图等表示,X轴表示数值型数据,Y轴表示类别型数据。...将类别型图表完美地嵌入表格中,能更加清晰明了地表示数据信息,尤其在咨询行业。废话少说,直接上插件一键操作的图表绘制视频。...EasyCharts可以算是国内最先关注数据可视化的Excel图表插件。现EasyCharts插件现在是1.0版本。EasyCharts1.0的升级版本2.0-EasyShu大大升级了原图表功能。...其界面如下,具体功能以后会一一介绍,包括多图绘制神器、图表高清导出等。这次类别型图表主要使用【经典图表】和【位置标定】两个功能。

    2.8K20

    Excel图表技巧12:为图表精确配色

    有时候,我们想要在自己的图表中使用与参照图表完全一样的颜色,但参照图表是以图片形式保存的,这就需要我们得到其准确的RGB值。然而,Excel的主要功能集中于数据处理,其检测对象颜色的能力有所欠缺。...选择图表图片并复制。 2. 打开PowerPoint。 3. 粘贴图表,或者直接插入图表图片。 4. 在幻灯片中插入任意大小的任意形状,如下图1所示。 ?...单击图表图片右侧条形图中上方红色的条形,如下图3所示。 ? 图3 7. 选择形状,单击“绘图工具”选项卡“形状样式”组中的“形状轮廓—取色器”。 8....单击图表图片右侧条形图中下方深色的条形,如下图4所示。 ? 图4 此时,形状的结果如下图5所示。 ? 图5 现在,我们已经确定了形状的颜色,我们可以检查形状的设置以查看填充和边框颜色的颜色代码。...图7 上述步骤完成后,我们就可以将这些颜色应用到自己的图表中了。如下图8所示的图表,我们需要将两个柱形系列分别应用上面的两种颜色。 ?

    2.7K40

    HTML5

    四、HTML5 一、什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的...HTML 语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 2.HTML5 拓展了哪些内容 语义化标签...本地存储 兼容特性 2D、3D 动画、过渡 CSS3 特性 性能与集成 3.HTML5 的现状 绝对多数新的属性,都已经被浏览器所支持,最新版本的浏览器已经开始陆续支持最新的特性, 总的来说:HTML5...已经是大势所趋 二、HTML5 新增标签 1.什么是语义化 2.新增了那些语义化标签 header --- 头部标签 nav --- 导航标签 article --- 内容标签 section...image.png 3.使用语义化标签的注意 语义化标签主要针对搜索引擎 新标签可以使用一次或者多次 在 IE9 浏览器中,需要把语义化标签都转换为块级元素 语义化标签,在移动端支持比较友好, 另外,HTML5

    3.2K20

    Excel图表技巧14:创建专业图表——基础

    因此,选择图表中的标题,然后按Delete键将其删除。 然后,单击并拖动图表的一角,将其缩小到工作表中大约三列的宽度,此时的图表如下图3所示: ?...图5 此时的图表看起来如下图6所示。 ? 图6 现在,需要为图表上方的标题、说明和数量单位文本留出空间。因此,单击并将图表向右拖动,暂时将图表放置在一边。...图8 现在,按Ctrl+x剪切图表,选择包含度量单位文本的单元格D4,按Ctrl+v将图表粘贴到该单元格。执行此操作后,图表如下图9所示。 ? 图9 调整图表位置,使向下箭头正好在垂直坐标轴数字上方。...并适当调整图表大小。 此外,最后的单元格通常包含创建图表的人的联系信息,让人们知道去哪里询问有关图表或其内容的问题。因此,在图表正下方的单元格中输入相关内容并格式化。然后,设置图表坐标轴标签为加粗。...现在的图表应该如下图10所示。 ? 图10 要使图表更宽,可以在工作表中加宽一列或在图表区域中插入一列;要使图表更高或更短,可以在图表区域内添加或删除工作表行。 至此,图表制作完成,是不是很简单!

    3.6K30

    Excel图表技巧02:绘制动态图表

    图表数据区域中的单元格数据增加或减少时,图表会自动相应变化,这就是我们所说的动态图表。本文介绍Excel中两种基本的制作动态图表的方法。...方法1:使用表 使用表作为图表源数据,那么当在表中添加或删除数据时,图表会自动更新,如下图1所示。 ?...方法2:使用命名公式 可以使用命名公式生成数据,作为图表的系列值,从而制作动态图表,如下图2所示。 ? 首先,定义2个名称。 名称:year 引用位置:=OFFSET(Sheet2!...$B:$B)-1,1) 然后,选择要绘制图表的数据,创建图表。编辑该图表的水平轴标签如下图3所示。 ? 编辑该图表的数据系列标签如下图4所示。 ?...也可以选择图表系列后,直接在公式栏中修改SERIES公式,如下图5所示。 ? 至此,动态图表制作完成。 欢迎在下面留言,完善本文内容,让更多的人学到更完美的知识。

    1.4K40
    领券