Web图表控件ChartDirector连载教程分享之角度仪指针,内附下载和链接。
ChartDirector是一个非常理想的图表工具,它拥有广泛的图表类型、分层架构、实时互动的大数据表、普遍适应于各种应用程序以及支持PDF和SVG图标等的优点。此系列连载旨在介绍ChartDirector的实用教程,供大家学习讨论。
一、角度仪指针(一)

这个例子演示了如何向一个仪表中添加多个不同风格的经典指针。对于角度仪,经典指针是使用BaseMeter.addPointer添加的。而新样式指针是使用AngularMeter.addPointer2添加的。
与新样式指针相比,经典角指针在形状上更粗。这使得它们能够表达各种形状。它们被设计成围绕一个小指针帽(中心的圆)旋转。这个例子展示了5个使用MeterPoint.SetShape配置的内置经典角指针形状。ChartDirector还支持使用meterpoint.SetShape2配置自定义形状。
源代码清单
以下代码可在“cppdemo/simplebar”中找到。MFC版本的代码可在“mfcdemo / mfcdemo”中找到(仅限Windows版本)。QT版本的代码可在“qtdemo/qtdemo”中找到。
#include "chartdir.h"int main(int argc, char *argv[]){ // Create an AngularMeter object of size 300 x 300 pixels with transparent background AngularMeter *m = new AngularMeter(300, 300, Chart::Transparent); // Set the default text and line colors to white (0xffffff) m->setColor(Chart::TextColor, 0xffffff); m->setColor(Chart::LineColor, 0xffffff); // Center at (150, 150), scale radius = 128 pixels, scale angle 0 to 360 degrees m->setMeter(150, 150, 128, 0, 360); // Add a black (0x000000) circle with radius 148 pixels as background m->addRing(0, 148, 0x000000); // Add a ring between radii 139 and 147 pixels using the silver color with a light grey // (0xcccccc) edge as border m->addRing(139, 147, Chart::silverColor(), 0xcccccc); // Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units m->setScale(0, 100, 10, 5, 1); // Set the scale label style to 16pt Arial Italic. Set the major/minor/micro tick lengths to // 13/10/7 pixels pointing inwards, and their widths to 2/1/1 pixels. m->setLabelStyle("ariali.ttf", 16); m->setTickLength(-13, -10, -7); m->setLineWidth(0, 2, 1, 1); // Add a semi-transparent blue (0x7f6666ff) pointer using the default shape m->addPointer(25, 0x7f6666ff, 0x6666ff); // Add a semi-transparent red (0x7fff6666) pointer using the arrow shape m->addPointer(9, 0x7fff6666, 0xff6666)->setShape(Chart::ArrowPointer2); // Add a semi-transparent yellow (0x7fffff66) pointer using another arrow shape m->addPointer(51, 0x7fffff66, 0xffff66)->setShape(Chart::ArrowPointer); // Add a semi-transparent green (0x7f66ff66) pointer using the line shape m->addPointer(72, 0x7f66ff66, 0x66ff66)->setShape(Chart::LinePointer); // Add a semi-transparent grey (0x7fcccccc) pointer using the pencil shape m->addPointer(85, 0x7fcccccc, 0xcccccc)->setShape(Chart::PencilPointer); // Output the chart m->makeChart("angularpointer.png"); //free up resources delete m; return 0;}
二、角度仪指针(二)

此示例演示如何向仪表中添加多个不同样式的新样式指针。对于角度仪,经典的指针通常使用BaseMeter.addPointer添加,而新样式指针使用AngularMeter.addPointer2添加。
与经典指针相比,新样式指针更细。新样式的仪表帽比经典的指针帽大,并且可以使用AngleMeter.SetCap2配置。新样式指针的基部和尖端可以在径向独立移动,这意味着指针可以从中心分离,甚至可以从外部指向内部
源代码清单
以下代码可在“cppdemo/simplebar”中找到。MFC版本的代码可在“mfcdemo / mfcdemo”中找到(仅限Windows版本)。QT版本的代码可在“qtdemo/qtdemo”中找到。
#include "chartdir.h"int main(int argc, char *argv[]){ // Create an AngularMeter object of size 300 x 300 pixels with transparent background AngularMeter *m = new AngularMeter(300, 300, Chart::Transparent); // Set the default text and line colors to white (0xffffff) m->setColor(Chart::TextColor, 0xffffff); m->setColor(Chart::LineColor, 0xffffff); // Center at (150, 150), scale radius = 125 pixels, scale angle 0 to 360 degrees m->setMeter(150, 150, 125, 0, 360); // Add a black (0x000000) circle with radius 148 pixels as background m->addRing(0, 148, 0x000000); // Add a ring between radii 139 and 147 pixels using the silver color with a light grey // (0xcccccc) edge as border m->addRing(139, 147, Chart::silverColor(), 0xcccccc); // Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units m->setScale(0, 100, 10, 5, 1); // Set the scale label style to 16pt Arial Italic. Set the major/minor/micro tick lengths to // 13/10/7 pixels pointing inwards, and their widths to 2/1/1 pixels. m->setLabelStyle("ariali.ttf", 16); m->setTickLength(-13, -10, -7); m->setLineWidth(0, 2, 1, 1); // Add a default red (0xff0000) pointer m->addPointer2(25, 0xff0000); // Add a semi-transparent green (0x3f00ff00) line style pointer m->addPointer2(9, 0x3f00ff00, -1, Chart::LinePointer2); // Add a semi-transparent blue (0x7f66aaff) triangular pointer floating between 60% and 85% of // the scale radius with the pointer width 5 times the default m->addPointer2(52, 0x7f66aaff, 0x66aaff, Chart::TriangularPointer2, 0.6, 0.85, 5); // Add a semi-transparent yellow (0x7fffff66) triangular pointer floating between 80% and 90% of // the scale radius with the pointer width 5 times the default m->addPointer2(65, 0x7fffff66, 0xffff66, Chart::TriangularPointer2, 0.8, 0.9, 5); // Add two red (0xff0000) triangular pointer at 72 and 94. The pointers float between 110% and // 100% of the scale radius with widths 3 times the default m->addPointer2(72, 0xff0000, -1, Chart::TriangularPointer2, 1.1, 1.0, 3); m->addPointer2(94, 0xff0000, -1, Chart::TriangularPointer2, 1.1, 1.0, 3); // Add a red (0xcc0000) zone spanning from 72 to 94, and between the radii 112 and 125 m->addZone(72, 94, 125, 112, 0xcc0000); // Output the chart m->makeChart("angularpointer2.png"); //free up resources delete m; return 0;}
想要购买ChartDirector正版授权,或者获取更多该产品相关信息的朋友可以点击” 咨询在线客服 “~
海量产品正在参加年终大促,价格优惠!详情请点击” 年终巅峰钜惠 “~
标签:Web图表交互图表
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!