数据图表

现在我们来看看VML的一些应用。数据图表可以说是VML的拿手好菜。绘制图表，最重要的步骤是把数据转换成坐标。由于VML是矢量的， 给数据的取值范围有很大的自由度，因为你可以用带小数的坐标值，也可以是非常大的数据做为坐标值。
    在做图表之前，必须明确一些事情，要把图表看成一个整体，这意味着使用 Group 将 VML 包容起来；x,y 轴是在第四像限里面的；VML的大小由 width,height 决定，而不是由coordsize决定。接下来，让我们看看几个经典的图表。
    曲线图(走势图)：看起来是曲线，其实细分起来就是一段段小折线组成的。所以我们可以选择PolyLine来做。首先我们来画坐标轴：

<v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt" coordsize="5000,3000">
  <v:line from="200,100" to="200,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke StartArrow="classic"/>
  </v:line>
  <v:line from="200,2800" to="4800,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    <v:stroke EndArrow="classic"/>
  </v:line>
  <v:rect style="WIDTH:4900px;HEIGHT:3000px" coordsize="21600,21600" fillcolor="white" strokecolor="black" />
</group>

    也许你希望显示坐标轴上的刻度，这也很容易实现，我们可以用一个绝对定位的P来做坐标，在Group里面，使用绝对实际上是相对Group的相对定位的。坐标值需要你自己调整了。因为我们画分横坐标使用的是 px=200+73*i;(其中200是距离左边的距离) 纵坐标是 py=2800-73*i; (因为总共的高度是2800,所以要用减去)现在，把数据转换成坐标变得很容易了。 当然这里的 i 是 0,1,2..7 ，也可以是你具体的数据，换算的时候，只需要按照比例得到坐标值，比如说你的纵坐标的价值是从 100，200，300，..700 相应的反应到坐标上就是 px=200+73*i*1/100 (其中,i为数据值,1/100是坐标值和数据的比例)

画图表的准备工作已经全部做好了，现在就差数据了。有了数据，把数据灌输到 PolyLine 里面，曲线就显示出来了。现在我们使用一些假数据，看看上面的效果如何！点这里显示曲线
    本节例子比较多，请访问下页。

赞 (0)

相关推荐

  • 数据图表

    现在我们来看看VML的一些应用.数据图表可以说是VML的拿手好菜.绘制图表,最重要的步骤是把数据转换成坐标.由于VML是矢量的, 给数据的取值范围有很大的自由度,因为你可以用带小数的坐标值,也可以是非常大的数据做为坐标值.    在做图表之前,必须明确一些事情,要把图表看成一个整体,这意味着使用 Group 将 VML 包容起来:x,y 轴是在第四像限里面的:VML的大小由 width,height 决定,而不是由coordsize决定.接下来,让我们看看几个经典的图表.    曲线图(走势图)

  • 基于PyQt5制作一个数据图表生成器

    基于PyQt5制作一个数据图表生成器

    我的需求:手动配置X轴.Y轴.图表标题等参数自动通过Pyecharts模块生成可视化的html数据图表,并将浏览器图表展示到UI界面上. 制作出图表后的效果展示如下: 另外,生成后的图表结果会使用 html 的形式保存下来. 导入 UI 界面相关的 PyQt5 第三方模块库. from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.QtGui import * 若是使用PyQt5的版本是5.10.1以上,则需要单独安

  • Python 实操显示数据图表并固定时间长度

    Python 实操显示数据图表并固定时间长度

    目录 1.非定长的时间轴 2.定长时间轴 实时显示数据 前言: python利用matplotlib库中的plt.ion()函数实现即时数据动态显示: 1.非定长的时间轴 代码示例: # -*- coding: utf-8 -*- import matplotlib.pyplot as plt import numpy as np import time from math import * plt.ion() #开启interactive mode 成功的关键函数 plt.figure(1)

  • Vue通过echarts实现数据图表化显示

    Vue通过echarts实现数据图表化显示

    目录 一.项目引入echarts 二.创建容器 三.配置图表 一.项目引入echarts ecahrts官网 官网有许多图表案例,并且可以直接复制对应的配置代码. vue项目中引入: 安装 npm install echarts --save 引入echarts 全部一次性引入: import * as echarts from 'echarts'; 按需引入: // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口. import * as echarts fr

  • MPAndroidChart绘制自定义运动数据图表示例详解

    目录 引言 TimeAxis SportYAxis CustomLineChart 引言 声明:文中的MPChart代指MPAndroidChart. 本系列之前的文章介绍的MPChart中BarChart相关的一些绘制,接下来我们看看LineChart相关的绘制. 这里以实际的运动相关的图表数据做业务支撑来讲解.MPChart图表支持多指触控方法,这里所有的图表自定义都关掉了这个属性,这样就减少Transformer,以及绘制过程中的更多的变动,相当于一个静态的图. 通常图表在放大的过程中,坐

  • python实现数据图表

    python实现数据图表

    平时压力测试,生成一些数据后分析,直接看 log 不是很直观,前段时间看到公司同事分享了一个绘制图表python 模块 : plotly, 觉得很实用,利用周末时间熟悉下. plotly plotly 主页 : https://plot.ly/python/ 安装 在 ubuntu 环境下,安装 plotly 很简单 python 版本2.7+ $ sudo pip install plotly 绘图 在 plotly 网站注册后,可以直接将生成的图片保存到网站上,便于共享保存. 这里使用离线的

  • Python使用plotly绘制数据图表的方法

    Python使用plotly绘制数据图表的方法

    导语:使用 python-plotly 模块来进行压测数据的绘制,并且生成静态 html 页面结果展示. 不少小伙伴在开发过程中都有对模块进行压测的经历,压测结束后大家往往喜欢使用Excel处理压测数据并绘制数据可视化视图,但这样不能很方便的使用web页面进行数据展示.本文将介绍使用python-plotly模块来进行压测数据的绘制,并且生成静态html页面方便结果展示. Plotly简介 Plotly是一款使用JavaScript开发的制图工具,提供了与主流数据分析语言交互的API(如:Pyt

  • Python数据可视化教程之Matplotlib实现各种图表实例

    前言 数据分析就是将数据以各种图表的形式展现给领导,供领导做决策用,因此熟练掌握饼图.柱状图.线图等图表制作是一个数据分析师必备的技能.Python有两个比较出色的图表制作框架,分别是Matplotlib和Pyechart.本文主要讲述使用Matplotlib制作各种数据图表. Matplotlib是最流行的用于绘制2D数据图表的Python库,能够在各种平台上使用,可以绘制散点图.柱状图.饼图等. 1.柱状图 是一种以长方形或长方体的高度为变量的表达图形的统计报告图,由一系列高度不等的纵向条纹

  • 使用antv替代Echarts实现数据可视化图表详解

    使用antv替代Echarts实现数据可视化图表详解

    目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移

  • ASP.NET中制作各种3D图表的方法

    ASP.NET中制作各种3D图表的方法

    前言 大家都知道通过图表控件,我们即能表示数据又能比较各种图表的数据,例如比较去年和今年的收入.图表的类型也有很多,如柱状图.折线图.条形图.组合图等等. 首先,我将展示如何绘制出一个简单的图表. 简单图表的步骤 步骤1 新建一个"ASP.NET Empty Web Site". 步骤2 在Solution Explorer 中添加新项目,添加new form. 步骤3 工具栏-标准-项目.我们会看到在.Net Framework Component.中有两个图表选项,打勾并保存..N

随机推荐