Flash图表控件FusionCharts如何高亮显示数据

2019-03-05 22:35|来源: 网络

使用Flash图表控件FusionCharts时,通过改变alpha是高亮显示数据的最简单方式。XML代码如下:

Xml代码
  1. <chart>  

  2.   <set label='John' value='420' />  

  3.   <set label='Mary' value='295'>  

  4.   <set label='Tom' value='523' />  

  5. </chart>  


 


在这里,已经设置了第二列的alpha值为50(范围是0 - 100)。查看这张图的时候,你会发现列是半透明的。



使用虚线边界高亮数据集

用户也可以通过设置它的边界为虚线高亮显示数据集。参考下面的

Xml代码
  1. <chart>  

  2.   <set label='John' value='420' />  

  3.   <set label='Mary' value='295' />  

  4.   <set label='Tom' value='523' />  

  5. </chart>  







通过在一个线/区域图内使用单个锚属性高亮数据集

   
   

FusionCharts允许用户设置单独 水平锚属性。参考下面的XML代码:

Xml代码
  1. <chart showValues='0'>  

  2.   <set label='John' value='420' />  

  3.   <set label='Mary' value='295' />  

  4.   <set label='Tom' value='523' anchorRadius='6' anchorSides='4' anchorBorderColor='0372AB'  

  5.        anchorBgColor='E1f5ff' />  

  6.   <set label='Hary' value='323' />  

  7. </chart>  


   
以上XML将会输出如下折现图:


   

   

可以在图片中清楚地看到高亮显示的锚点

在一个多系列图中通过使用单个颜色属性来高亮单个数据

FusionCharts允许用户在一个多系列图中指定 水平颜色。参考下面的XML:

  
   
    
    
   
   
    
    
   
   
    
    
   
   
    
    
   
  

Xml代码
  1. <chart>  

  2.      <categories>  

  3.          <category label="Product A" />  

  4.          <category label="Product B" />  

  5.      </categories>  

  6.      <dataset SeriesName="2005">  

  7.          <set value="324" />  

  8.          <set value="457" />  

  9.      </dataset>  

  10.      <dataset SeriesName="2006">  

  11.          <set value="456" />  

  12.          <set value="787" color='FF5904' />  

  13.      </dataset>  

  14.      <dataset SeriesName="2007">  

  15.          <set value="557" />  

  16.          <set value="767" />  

  17.      </dataset>  

  18. </chart>  





   

   

 
转自:http://jfaiukjh65.iteye.com/blog/1924795

相关问答

更多
  • 处理CustomDrawSeriesPoint事件时,可以直接访问当前数据行。 演员e.SeriesPoint 。 将属性标记为相应的类型(例如, DataRowView )。 这应该可以更新SeriesPoint标签文本。 您可以在数据集列中找到一个小样本项目,该数据集列不是系列故障单的一部分,可以在图表系列标签中说明此方法。 It is possible to access the current data row directly when handling the CustomDrawSeriesP ...
  • 如果您进行调查,您将看到在responseText中获取HTML (一个DIV )和SCRIPT (一些用于在DIV中呈现图表的JavaScript代码)。 现在,当您将responseText设置为HTML元素的innerHTML时,HTML DOM解析器会添加并显示HTML部分(带文本chart DIV)。 但是,它不执行SCRIPT部分(用于呈现DIV内的chart替换chart文本。 实现渲染的理想方法是执行SCRIPT 。 如果你使用jQuery ajax函数,这是很好的管理,类似于: f ...
  • 我会尝试为每个图表类型创建一个类,但使用基类将类似的图表保持在一起。 该类应该只是图表数据和图表设置的“数据持有者”,并将XML输出创建委托给单独的类。 这使得在输出生成或插入其他输出格式的不同解决方案之间轻松尝试和切换。 I would try to create one class per chart type, but use base classes to keep similar charts together. The class should only be the "data holder" ...
  • 您使用的是哪个版本的FusionCharts? 您无需更改代码即可轻松升级到最新版本的FusionCharts v3.3.1 SR2。 最新版本为您提供了Fusioncharts的JavaScript变体,可以在所有设备上呈现,而不管Flash播放器的存在。 通过这样做,您还可以确保所有设备具有相同的外观。 参考: http : //docs.fusioncharts.com/charts/contents/index.html ?Introduction/Upgrading32.html 如果您使用的Fu ...
  • 您可以在Android本机应用程序中参考所附的使用FusionWidgets的示例。 同样,您可以更新此应用程序以呈现甘特图而不是角度计。 此外,PDF可能会有所帮助。 FusionWidget + Android示例 - https://www.dropbox.com/s/tisri8pefjmpei2/FusionWidgets.zip PDF-如何将FusionCharts与Android移动应用程序一起使用 - https://www.dropbox.com/s/pz9772tvobxooel/An ...
  • 我设法解决了这个问题 - 问题是我使用了JSON.stringify,它增加了额外的新行符号,使得JSON无法读取FusionCharts。 解决方法是简单地将我的数组值传递给图表数据: const r = response.data.dates.map((d, i) => Object.assign({ label: d, value: response.data.stockValues[i] ...
  • 您创建的用于呈现图表的JSON结构不正确,例如,“类别”应该将对象数组作为值,但是您将一组值传递给它,数据集内部的数据键也是如此。 您需要修改代码,或者也可以使用我的代码 。 The JSON structure you are creating to render the chart is not correct e.g. as "categories" should have an array of objects as a value, but you are passing an array of ...
  • 我想你需要告诉adp不要引用listaDatos变量。 尝试将adp中的行更改为: barras.setXMLData("@listaDatos;noquote@"); I think you need to tell the adp not to quote the listaDatos variable. Try changing the line in the adp to this: barras.setXMLData("@listaDatos;noquote@");
  • TL; DR 通过使用ExtJS 4.0.7中的图表而不是FusionCharts 3.2,我看到内存使用量,CPU负载和渲染时间显着减少,通常大约为70-85%。 介绍 我最近有时间测试Ext的图表。 重写组件以将Ext 4图表集成到Ext 3面板中是有点痛苦的,但是只需几天的工作,我就可以从服务器中绘制实际数据。 我试图解决的基本图表问题如下图所示: 我们绘制了设备上多个插座的功率读数趋势图。 这在FusionCharts中运行良好,直到最近我们开始使用168个插座(并且可能在一个页面上有几个这样的设备 ...
  • XML数据源格式不是有效的格式。 请查看代码以供参考 - FusionCharts.ready(function() { var revenueChart = new FusionCharts({ type: 'msbar2d', renderAt: 'chart-container', width: '500', height: '300', dataFormat: 'xml', dataSource: '