专利名称：应用于网页中的折线图坐标点绘制系统及其方法
技术领域：
本发明涉及一种绘制系统及其方法，尤其是指一种应用于网页中的折线图坐标点绘制系统及其方法。
背景技术：
随着网络科技的快速发展，网络已经成为现代人不可或缺的一部分，使用者可以通过网络进行数据的查询、进行物品的购买、进行数据的下载、进行资料数据的统计分析...等功能。在网络的资料数据统计分析来说，除了使用数据表来进行资料数据统计分析之夕卜，更常用的方法即为使用图表来进行资料数据统计分析，而通过图表对资料数据统计分析，使用者可以更直观的了解资料数据所代表的意义。对于网络中的图表显示来说，通常采用两种方式，一种是将资料数据在服务器端进行统计分析后，进行图表的绘制，再将绘制后的图表以图像档案的方式显示于网页中，另外一种是将资料数据以动态方式产生出图表，再将动态产生出的图表显示于网页中。而上述图表的产生都是以系统所制定的显示方式进行图表的显示，当使用者想要改变图表显示的样式而不对资料数据进行改变时，不论上述使用哪一种方式来显示图表， 都会重新的将整张图表重新绘制，再将重新绘制的结果显示于网页中，这会造成服务端不必要的负载，亦会产生使用上操作不便的问题。综上所述，可知现有技术中长期以来一直存在网页中图表需要完整重新绘制不利于图表样式变更的问题，因此有必要提出改进的技术手段，来解决此一问题。
发明内容
有鉴于现有技术存在网页中图表需要完整重新绘制不利于图表样式变更的问题， 本发明于是提供一种应用于网页中的折线图坐标点绘制系统及其方法，其中本发明所提供的应用于网页中的折线图坐标点绘制系统，其包含数据接收模块、 排序模块、信号模块、绘制模块、坐标点绘制模块以及显示模块，其中，绘制模块更包含坐标轴绘制单元、连线绘制单元以及生成单元。数据接收模块是接收一组绘图数据以及坐标点样式信息，或接收样式变更信息； 排序模块是将该组绘图数据中每一组数据的第一数据由小而大进行排序；信号模块是当坐标点样式信息被接收时，触发绘制信号；当样式变更信息被接收时，触发变更信号；绘制模块的坐标轴绘制单元是当绘制信号被触发时，根据坐标单位及该组绘图数据绘制出坐标轴；绘制模块的连线绘制单元是当绘制信号被触发时，依据排序后的该组绘图数据将每一组相邻两坐标点之间绘制连接线于坐标平面上；绘制模块的生成单元是当绘制信号被触发时，生成坐标点绘制请求；当变更信号被触发时，生成变更绘制请求；坐标点绘制模块是当坐标点绘制请求被生成时，依据坐标点样式信息于该组绘图数据的每一个坐标点进行绘制于坐标平面上，当变更绘制请求被生成时，依据样式变更信息于该组绘图数据的每一个坐标点进行重新绘制，分别生成具新样式的坐标点于坐标平面上取代原来的坐标点；显示模块是用以显示绘制模块与坐标点绘制模块的绘制结果，或显示坐标点绘制模块的重新绘制结果。本发明所提供的应用于网页中的折线图坐标点绘制方法，其包含下列步骤首先，接收一组绘图数据以及坐标点样式信息；接着，对该组绘图数据中每一组数据的第一数据由小而大进行排序；接着，当坐标点样式信息被接收时，触发绘制信号；接着，当绘制信号被触发时，根据坐标单位及该组绘图数据绘制出坐标轴；接着，当绘制信号被触发时，依据排序后的该组绘图数据将每一组相邻两坐标点之间绘制连接线于坐标平面上；接着，当绘制信号被触发时，生成坐标点绘制请求；接着，当坐标点绘制请求被生成时， 依据坐标点样式信息于该组绘图数据的每一个坐标点进行绘制于坐标平面上；接着，显示坐标轴、连接线以及坐标点的绘制结果；接着，接收样式变更信息；接着，当样式变更信息被接收时，触发变更信号；接着，当变更信号被触发时，生成变更绘制请求；接着，当变更绘制请求被生成时，依据样式变更信息于该组绘图数据的每一个坐标点进行重新绘制，分别生成具新样式的坐标点于坐标平面上取代原来的坐标点；最后，显示坐标点的重新绘制结果。
本发明所提供的系统与方法如上，与现有技术之间的差异在于本发明将坐标轴及连接线与坐标点分别进行绘制的处理，借以提供使用者对于坐标点样式的变更时，可以快速的对坐标点样式进行变更，而并不会对整张的图表进行重新绘制，并且避免造成服务端不必要的负载，亦可以避免操作不便的问题。通过上述的技术手段，本发明可以达成网页中图表样式变更快速的技术功效。
图1绘示为本发明应用于网页中的折线图坐标点绘制系统的系统方块图；图2绘示为本发明应用于网页中的折线图坐标点绘制方法的方法流程图；图3A绘示为本发明应用于网页中的折线图坐标点绘制的界面示意图；图;3B绘示为本发明应用于网页中的折线图坐标点绘制的绘制结果示意图；图3C绘示为本发明应用于网页中的折线图坐标点绘制的重新绘制结果示意图。主要组件符号说明11数据接收模块12排序模块13信号模块14绘制模块141坐标轴绘制单元142连线绘制单元143生成单元15坐标点绘制模块16显示模块21网页31绘图数据311第一笔绘图数据312第二笔绘图数据313第三笔绘图数据32坐标点样式信息33样式变更信息
具体实施例方式以下将配合图式及实施例来详细说明本发明的实施方式，借此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。以下首先要说明本发明所提供的应用于网页中的折线图坐标点绘制系统，并请参考「图1」所示，「图1」绘示为本发明应用于网页中的折线图坐标点绘制系统的系统方块图。本发明所提供的应用于网页中的折线图坐标点绘制系统，其包含数据接收模块 11、排序模块12、信号模块13、绘制模块14、坐标点绘制模块15以及显示模块16，其中，绘制模块14更包含坐标轴绘制单元141、连线绘制单元142以及生成单元143。应用于网页中的折线图坐标点绘制系统是嵌入于网页中，用以对被嵌入网页中的数据进行折线图的绘制，使用者可以在网页中选择需要进行折线图绘制的绘图数据，并且同时选择坐标点呈现的外形、大小以及色彩...等信息，坐标点的外形、坐标点的大小以及坐标点的色彩即为坐标点样式信息。接着，数据接收模块11即会接收使用者所选择的一组绘图数据以及使用者所选择坐标点样式信息，而在数据接收模块11接收到该组绘图数据以及坐标点样式信息之后， 会再借由排序模块12对该组绘图数据进行排序，排序模块12即将该组绘图数据的第一数据由小而大进行排序，借以避免在绘图时所产生的错误。具体而言，假设该组绘图数据的第一笔绘图数据为“(300，150) ”，该组绘图数据的第二笔绘图数据为“(100，50)，，以及该组绘图数据的第三笔绘图数据为“(200，100) ”，第一笔绘图数据的第一数据为“300”、第二笔绘图数据的第一数据为“100”以及第三笔绘图数据的第一数据为“200”，排序后的结果即为第二笔绘图数据“(100，50)”、第三笔绘图数据 “(200，100)，，以及第一笔绘图数据 “(300，150) ”。接着，在数据接收模块11接收到该组绘图数据以及坐标点样式信息后，此时数据接收模块11会接收到坐标点样式信息，而信号模块13即会触发绘制信号。接着，当绘制信号被触发时，绘制模块14会借由绘制模块14的坐标轴绘制单元 141根据坐标轴单位及该组绘图数据绘制出坐标轴。具体而言，坐标轴的单位可以由系统根据不同的数据项目预先设定，也可以由使用者自己选择设定。假设系统预设X轴单位为“100”，Y轴单位为“50”，那么X轴即会以单位为“ 100”进行绘制，而Y轴即会以单位为“50”进行绘制。接着，当绘制信号被触发时，绘制模块14的连线绘制单元142是依据排序后的该组绘图数据将每一组相邻两坐标点之间绘制连接线于坐标轴绘制单元141所绘制的坐标平面上。具体而言，假设排序模块12所排序后的结果即为第二笔绘图数据“(100，50)”、 第三笔绘图数据“(200，100)，，以及第一笔绘图数据“(300，150) ”，此时，第二笔绘图数据 “ (100,50)，，以及第三笔绘图数据“(200，100)，，为相邻两坐标点，连线绘制单元142即会将第二笔绘图数据“(100，50)，，以及第三笔绘图数据“(200，100) ”绘制连接线于坐标平面上， 而第三笔绘图数据“(200，100)，，以及第一笔绘图数据“(300，150)，，为相邻两坐标点，连线绘制单元142即会将第三笔绘图数据“(200，100)，，以及第一笔绘图数据“(300，150)，，绘制连接线于坐标平面上。接着，绘制模块14的生成单元143是当绘制信号被触发时，生成坐标点绘制请求， 而当坐标点绘制请求被生成时，坐标点绘制模块15即会依据数据接收模块11所接收到的坐标点样式信息，将该组绘图数据的每一个坐标点进行绘制于坐标轴绘制单元141所绘制的坐标平面上。具体而言，承上述举例，假设坐标点样式信息为“圆形，12，黑色”(即分别对应“坐标点的外形，坐标点的大小，坐标点的色彩”)，坐标点绘制模块15即会于坐标点“(100， 50) ”、“(200，150) ”、“(300，150) ”绘制大小为12色彩为黑色的圆形。接着，显示模块16即是显示绘制模块14与坐标点绘制模块15的绘制结果，使用者即可以得到对应的折线图。而当使用者想要对坐标点的样式进行变更时，即为变更坐标点的外形、坐标点的大小或是坐标点的色彩，使用者即可以在网页中选择坐标点变更所呈现的外形、大小以及色彩...等信息，这些重新选择的坐标点的外形、坐标点的大小以及坐标点的色彩即为样式变更信息。接着，数据接收模块11即会接收使用者所选择的样式变更信息，在数据接收模块 11接收到样式变更信息后，信号模块13即会触发变更信号。而当变更信号被触发时，绘制模块14的生成单元143会生成变更绘制请求，坐标点绘制模块15即会依据数据接收模块11所接收到的样式变更信息，将该组绘图数据的每一个坐标点进行重新绘制，分别生成具新样式的坐标点于坐标平面上取代原来的坐标点， 并且显示模块16即是显示坐标点绘制模块15的重新绘制结果，使用者即可以得到坐标点的样式变更的折线图。接着，以下将以一个实施例来解说本发明的运作方式及流程，以下的实施例说明请同时参考「图1」、「图2」以及「图3A」所示进行说明，「图2」绘示为本发明应用于网页中的折线图坐标点绘制方法的方法流程图；「图3A」绘示为本发明应用于网页中的折线图坐标点绘制的界面示意图。使用者在开启嵌入有应用于网页中的折线图坐标点绘制系统的网页21中，选择需要进行折线图绘制的一组绘图数据31，该组绘图数据31分别为第一笔绘图数据311 为“(300，150) ”、第二笔绘图数据312为“(100，50) ”以及第三笔绘图数据313为“ (200， 100) ”，并且使用者选择坐标点样式信息32为“圆形，12，黑色”(即分别对应“坐标点的外形，坐标点的大小，坐标点的色彩”)。接着，请同时参考「图1」、「图2」以及「图3B」所示进行说明，「图3B」绘示为本发明应用于网页中的折线图坐标点绘制的绘制结果示意图。在使用者选择该组绘图数据31以及坐标点样式信息32之后，数据接收模块11即会接收使用者所选择的该组绘图数据31以及使用者所选择坐标点样式信息32 (步骤110)， 会再借由排序模块12对该组绘图数据进行排序，排序模块12即将该组绘图数据31的第一数据由小而大进行排序，排序后的结果即为第二笔绘图数据312“(100，50) ”、第三笔绘图数据 313 “(200，100)，，以及第一笔绘图数据 311 “(300，150)，，(步骤 120)。接着，在数据接收模块11接收到该组绘图数据31以及坐标点样式信息32后，信号模块13即会触发绘制信号(步骤130)，即函数LineChartO会被执行。假设本实施例中系统预设X轴单位为“100”，Y轴单位为“50”，此时，X轴即会以单位为“ 100，，进行绘制，即X轴的刻度分别为“0，，、“ 100，，、“200”以及“300”，而Y轴即会以单位为“50”进行绘制，即Y轴的刻度分别为“0”、“50”、“100”以及“150”，其绘制结果请参考 「图3Β」所示。
接着，当绘制信号被触发时，即函数LineChartO被执行时，会借由绘制模块14的连线绘制单元142依据排序后的该组绘图数据31将每一组相邻两坐标点之间绘制连接线于坐标轴绘制单元141所绘制的坐标平面上(步骤150)，即连线绘制单元142即会将第二笔绘图数据312 “(100，50)”以及第三笔绘图数据313 “ Q00，100) ”绘制连接线于坐标平面上，将第三笔绘图数据313 “(200，100)”以及第一笔绘图数据311 “(300，150) ”绘制连接线于坐标平面上，其绘制结果请参考「图3B」所示。接着，绘制模块14的生成单元143是当绘制信号被触发(即函数LineChart () 会被触发)时，生成坐标点绘制请求(步骤160)，即函数DrawChart ()会被执行，而在函数 DrawChart ()执行时，会间接执行函数drawDot ()，即会借由坐标点绘制模块15依据数据接收模块11所接收到的坐标点样式信息32 “圆形，12，黑色”，将该组绘图数据31的每一个坐标点进行绘制于坐标轴绘制单元141所绘制的坐标平面上，即函数ColorDotaiape ()与 PictureDotShapeO会单一被执行或是同时被执行，这也是实际坐标点被绘制的函数(步骤170)，即会于坐标点“ (100,50) ”、“(200，150) ”、“(300，150) ”绘制大小为12色彩为黑色的圆形，其绘制结果请参考「图3B」所示。接着，显示模块16即是显示绘制模块14与坐标点绘制模块15的绘制结果，即显示坐标轴、连接线以及坐标点的绘制结果(步骤180)，其绘制结果请参考「图3B」所示，使用者即可以得到对应的折线图。接着，请同时参考「图1」、「图2」以及「图3C」所示进行说明，「图3C」绘示为本发明应用于网页中的折线图坐标点绘制的重新绘制结果示意图。当使用者想要对坐标点的样式进行变更时，使用者重新选择样式变更信息33为 “矩形，12，黑色”(即分别对应“坐标点的外形，坐标点的大小，坐标点的色彩”)。在使用者选择样式变更信息33之后，数据接收模块11即会接收使用者所选择的样式变更信息33(步骤210)，在数据接收模块11接收到样式变更信息33后，信号模块13 即会触发变更信号(步骤220)，即函数LineChart ()会被执行。而绘制模块14的生成单元143会在变更信号被触发(即函数LineChart ()会被触发)时，生成变更绘制请求(步骤230)，即函数DrawChartO会被执行，而在函数 DrawChart ()执行时，会间接执行函数drawDot ()。当绘制信号被触发时，即函数LineChartO被执行以及函数drawDot ()被间接执行时，会借由坐标点绘制模块15依据数据接收模块11所接收到的样式变更信息33“矩形， 12，黑色”，将该组绘图数据31的每一个坐标点进行绘制于坐标轴绘制单元141所绘制的坐标平面上，即函数ColorDotShapeO与PictureDotShape ()会单一被执行或是同时被执行，这也是实际坐标点被绘制的函数(步骤M0)，即会于坐标点“(100，50) ”、“(200，150)，，、 “(300，150) ”绘制大小为12色彩为黑色的矩形，即分别生成具新样式的坐标点于坐标平面上取代原来的坐标点，其绘制结果请参考「图3C」所示。接着，显示模块16即是显示坐标点绘制模块15的重新绘制结果，即显示坐标点的重新绘制结果(步骤250)，其重新绘制结果请参考「图3C」所示，使用者即可以得到坐标点的样式变更的折线图。借由此一技术手段可以来解决现有技术所存在网页中图表需要完整重新绘制不利于图表样式变更的问题，进而达成网页中图表样式变更快速的技术功效。
虽然本发明所提供的实施方式如上，但是所述的内容并非用以直接限定本发明的专利保护范围。任何本发明所属技术领域中的技术人员，在不脱离本发明所公开的精神和范围的前提下，可以在实施的形式上及细节上作些许的更动。本发明的专利保护范围，仍须以所附的权利要求书所界定者为准。
权利要求
1.一种应用于网页中的折线图坐标点绘制系统，其特征在于，包含一数据接收模块，接收一组绘图数据以及一坐标点样式信息，或接收一样式变更信息；一信号模块，当该坐标点样式信息被接收时，触发一绘制信号；当该样式变更信息被接收时，触发一变更信号；一绘制模块，该绘制模块更包含一坐标轴绘制单元，当该绘制信号被触发时，根据坐标轴单位及该组绘图数据绘制出坐标轴；一连线绘制单元，当该绘制信号被触发时，依据排序后的该组绘图数据将每一组相邻两坐标点之间绘制连接线于坐标平面上；及一生成单元，当该绘制信号被触发时，生成一坐标点绘制请求； 当该变更信号被触发时，生成一变更绘制请求；一坐标点绘制模块，当该坐标点绘制请求被生成时，依据该坐标点样式信息于该组绘图数据的每一个坐标点进行绘制于坐标平面上，当该变更绘制请求被生成时，依据该样式变更信息于该组绘图数据的每一个坐标点进行重新绘制，分别生成具新样式的坐标点于坐标平面上取代原来的坐标点；及一显示模块，用以显示该绘制模块该坐标点绘制模块的绘制结果，或显示绘制模块与该坐标点绘制模块的重新绘制结果。
2.如权利要求1所述的应用于网页中的折线图坐标点绘制系统，其特征在于，该坐标点样式信息包含坐标点的外形、坐标点的大小以及坐标点的色彩。
3.如权利要求1所述的应用于网页中的折线图坐标点绘制系统，其特征在于，该样式变更信息包含坐标点的外形、坐标点的大小以及坐标点的色彩。
4.一种应用于网页中的折线图坐标点绘制方法，其特征在于，包含下列步骤 接收一组绘图数据以及一坐标点样式信息；对该组绘图数据中每一组数据的第一数据由小而大进行排序；当该坐标点样式信息被接收时，触发一绘制信号；当该绘制信号被触发时，根据坐标轴单位及该组绘图数据绘制出坐标轴；依据排序后的该组绘图数据将每一组相邻两坐标点之间绘制连接线于坐标平面上；当该绘制信号被触发时，生成一坐标点绘制请求；当该坐标点绘制请求被生成时，依据该坐标点样式信息于该组绘图数据的每一个坐标点进行绘制于坐标平面上；显示坐标轴、连接线以及坐标点的绘制结果； 接收一样式变更信息；当该样式变更信息被接收时，触发一变更信号； 当该变更信号被触发时，生成一变更绘制请求；当该变更绘制请求被生成时，依据该样式变更信息于该组绘图数据的每一个坐标点进行重新绘制，分别生成具新样式的坐标点于坐标平面上取代原来的坐标点；及显示坐标点的重新绘制结果。
全文摘要
本发明公开了一种应用于网页中的折线图坐标点绘制系统及其方法，将坐标轴及连接线与坐标点分别进行绘制的处理，借以提供在使用者对坐标点的样式进行变更时，可以快速完成对坐标点样式的变更，而并不会对整张的图表进行重新绘制，借此可以达成网页中图表样式变更快速的技术功效。
文档编号G06F17/30GK102467549SQ201010547559
公开日2012年5月23日 申请日期2010年11月15日 优先权日2010年11月15日
发明者蔡敏捷, 邱全成 申请人:英业达股份有限公司