`

amchart 配置详解-转载

 
阅读更多

amchart 配置详解

 http://www.amcharts.com 

 

amchart 配置详解

 

amchart的原理是通过一个主html文件（例如：index.html），包含一段JS代码，这段JS代码将调用相关的图形的SWF文件(amcolumn.swf)，数据源我采用的是XML的方式（例如：amcolumn_data.xml），然后通过一个主设置文件（amcolumn_settings.xml）,从而产生图形显示的。

拿柱形图来说，就是通过index.html主页面将amcolumn_data.xml的数据通过amcolumn.swf来进行显示，而amcolumn_settings.xml是对所产生图形的配置进行设置的文件，包括颜色，宽度等。

 

 

 

 

复制代码
<body>
 <div id="flashcontent">
  <strong>You need to upgrade your Flash Player</strong>
 </div>
 <script type="text/javascript" src="amstock/swfobject.js"></script>
 <script type="text/javascript">  
  var so = new SWFObject("/amchart/amchart/amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF"); // 创建SWFObject对象
  so.addVariable("path", "/amchart/amchart/amcolumn/"); 
  so.addVariable("settings_file", encodeURIComponent("xxx.xml")); // 配置文件
   so.addVariable("preloader_color", "#000000"); // 加载时显示的颜色
  so.write("flashcontent"); // 在flashcontent位置写入flash插入的HTML
 </script>
</body>
复制代码

 

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<!-- Only the settings with values not equal to defaults are in this file. If you want to see the
full list of available settings, check the amstock_settings.xml file in the amstock folder. -->
<settings>全局根标签
<legend_position>right</legend_position>图例位置
<legend_width>200</legend_width>图例宽度
<margins>12</margins>边距        
<text_color>FF7F00</text_color>文字颜色
<text_size>14</text_size>文字大小                     
<max_series>100</max_series>最多线条数
<start_on_axis>1</start_on_axis>是否从原点开始
<number_format>数据格式
  <decimal_separator>.</decimal_separator>小数点符号
  <digits_after_decimal>
    <data>2</data>
  </digits_after_decimal>
  <letters>
     <letter number="1"></letter>最小单位
     <letter number="1000000000">B</letter>最大单位
  </letters>   
</number_format>
<data_sets>
   <data_set>数据源配置
       <file_name>/taa/rpc/data_suggestion.jsp?entry=<%=taaGroupUserId%>_<%=category%></file_name> 数据源文件路径
       <csv>
         <reverse>true</reverse>要设置为true否则下面的日期滚动区域会乱掉
         <separator>,</separator>数据分隔符
         <date_format>YYYY-MM-DD</date_format>日期格式
         <decimal_separator>.</decimal_separator>小数点符号
               <columns>更数配置
                   <column>date</column>列名
                   <column>closePrice</column>
                   <column>saa</column>
                   <column>taaCollect</column>
                   <column>taaTWCollect</column>
                   <column>scale</column> 
              </columns>
       </csv>
    </data_set>
</data_sets>





<charts>
    <chart>图形框配置
    <bg_color>000000</bg_color>背景色
    <border_color>000000</border_color>边框颜色
    <border_alpha>100</border_alpha>边框过滤度
    <grid>图形框中的分隔线
    <x>X轴上的分隔线
        <dashed>true</dashed>是否打散
    </x>
    <y_left>Y轴上的分隔线
        <color>cccccc</color>分隔线颜色
        <alpha>100</alpha>过滤度
        <dashed>true</dashed>是否打散
    </y_left>
    </grid>
     <values>
       <x>X轴上的数值
             <enabled>true</enabled>是否显示
             <bg_color>000000</bg_color>背景色
         </x>
     <y_left>Y轴上的数值
       <enabled>true</enabled>是否显示
       <unit>%</unit>Y轴数值单位
       <unit_position>right</unit_position>Y轴数值单位位置
     </y_left>
     </values>
    <comparing>
       <calculate>false</calculate>是否重新计算
    </comparing>
    <legend>图例设置
        <show_date>true</show_date>是否显示
        <graph_on_off>true</graph_on_off>默认
        <fade_others_to>15</fade_others_to>默认
    <value_color>FF7F00</value_color>数值颜色
    <positive_color>ff0000</positive_color>大于0%显示的颜色
    <negative_color>00ff00</negative_color>小于0%显示的颜色
    </legend>


    <graphs>
        <graph>线条配置
          <color>00ff00</color>线条颜色
          <title>公司SAA</title>标题
            <axis>left</axis>Y轴位置 
            <type>line</type>线条类型
            <smoothed>true</smoothed>是否光滑
            <!--
            <bullet>round</bullet>数据结点样式
            -->
        <bullet_alpha>0</bullet_alpha>过滤度
        <bullet_position>middle</bullet_position>数据结点位置
        <width>2</width>线条宽度
            <data_sources>数据源
              <close>saa</close>数据列名称
            </data_sources>
            <cursor_color>ffffff</cursor_color>鼠标聚焦颜色
          <fill_alpha>0</fill_alpha>过滤度
            <legend>图例数据配置
              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>
            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>
            </legend>
        </graph>
        
        <graph>
            <title>投委会TAA</title>
          <color>ff00ff</color>
            <axis>left</axis> 
            <smoothed>true</smoothed>
            <!--
            <bullet>round</bullet>
            -->
        <bullet_alpha>0</bullet_alpha>
        <bullet_position>middle</bullet_position>
        <width>2</width>
            <data_sources>
              <close>taaTWCollect</close> 
            </data_sources>
            <cursor_color>ffffff</cursor_color>
          <fill_alpha>0</fill_alpha>
            <legend>
              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>
            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>
            </legend>
        </graph>    
        <graph>
          <color>ffff00</color>
          <title>TAA小组</title>
            <axis>left</axis> 
            <type>line</type> 
            <smoothed>true</smoothed>
            <!--
            <bullet>round</bullet>
            -->
        <bullet_alpha>0</bullet_alpha>
        <bullet_position>middle</bullet_position>
        <width>2</width>
            <data_sources>
              <close>taaCollect</close> 
            </data_sources>
            <cursor_color>ffffff</cursor_color>
          <fill_alpha>0</fill_alpha>
            <legend>
              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>
            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>
            </legend>
        </graph>
        <graph>
            <title><%=stockName%></title>
          <color>ff0000</color>
            <axis>right</axis> 
            <type>line</type> 
            <smoothed>true</smoothed>
            <!--
            <bullet>round</bullet>
            -->
        <bullet_alpha>0</bullet_alpha>
        <bullet_position>middle</bullet_position>
        <width>2</width>
            <data_sources>
              <close>closePrice</close> 
            </data_sources>
            <cursor_color>ffffff</cursor_color>
          <fill_alpha>0</fill_alpha>
            <legend>
                  <value_color>FF7F00</value_color>
              <date key="true" title="true"><![CDATA[<b>{close}</b>]]></date>
            <period key='true' title='true'><![CDATA[<b>{close}</b>]]></period>
            </legend>
        </graph>
<%if(!taaGroupUserId.equals("0")){%>
        <graph>
            <title><%=fullName%></title>
            <color>00ffff</color>
            <axis>left</axis> 
            <type>line</type> 
            <smoothed>true</smoothed>
            <!--
            <bullet>round</bullet>
            -->
        <bullet_alpha>0</bullet_alpha>
        <bullet_position>middle</bullet_position>
        <width>2</width>
            <data_sources>
              <close>scale</close>
      </data_sources>
            <cursor_color>ffffff</cursor_color>
          <fill_alpha>0</fill_alpha>
        <legend>
        <date key='true' title='true'><![CDATA[<b>{close}%</b>]]></date>
        <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>
      </legend>     
        </graph>
<%}%>

    </graphs>
    </chart>
</charts>
<data_set_selector>数据选择器
    <enabled>false</enabled>
  <width>130</width> 宽度
  <max_comparing_count>30</max_comparing_count>最多比较个数
  <main_drop_down_title>选择:</main_drop_down_title>选择框名称
  <compare_list_box_title>比较:</compare_list_box_title>下拉比较框名称
  <balloon_text>
      <![CDATA[ <b>{title}</b><br>{description}]]>鼠标移上去弹出框显示内容
  </balloon_text>
    <drop_down>下拉比较框样式设置
      <bg_color>333333</bg_color>背景色
      <bg_color_selected>333333</bg_color_selected>选中颜色
      <bg_color_hover>ffffff</bg_color_hover>鼠标移上去显示颜色
      <scroller_color>ff0000</scroller_color>滚动条颜色
    </drop_down>
</data_set_selector>
  
  


  <balloon>弹出小窗设置
    <bg_color>ffffff</bg_color>背景色
    <text_color>FF7F00</text_color>字体颜色
    <bg_alpha>100</bg_alpha>过滤度
    <border_color>000000</border_color>边框颜色
  </balloon>
  <period_selector>日期区域设置
    <button>
      <bg_color>1C1A1C</bg_color>背景色
      <bg_color_selected>ffffff</bg_color_selected>选中时背景色
      <bg_color_hover>00FF99</bg_color_hover>鼠标移上去背景色
    </button>
    <input>
      <bg_color>1C1A1C</bg_color>输入框背景色
    </input>
        <periods>        
      <period type="DD" count="10">10天</period>
        <period type="MM" count="1" selected="true">1月</period>
        <period type="MM" count="3">3月</period>
        <period type="YYYY" count="1">1年</period>      
        <period type="MAX">最大</period>
        </periods>
        <periods_title>缩放:</periods_title>缩放区域名称
        <custom_period_title>自定义区间:</custom_period_title>自定义区间名称
  </period_selector>
  <header>图头
    <enabled>false</enabled>是否显示
      <text>
          <![CDATA[ <b>{title}</b>]]>图头文字
      </text>
      <text_size>14</text_size>文字大小
  </header>
  
  
  <plot_area>
    <border_color>1C1A1C</border_color>选中区域边框颜色
  </plot_area>

  <scroller>
    <graph_data_source>close</graph_data_source>数据源
    <resize_button_style>arrow</resize_button_style>播放图标样式
    <resize_button_color>002b6d</resize_button_color>播放图标颜色
    <graph_selected_fill_alpha>100</graph_selected_fill_alpha>选中区域过滤度
    <playback>
      <enabled>true</enabled>是否允许
      <speed>3</speed>滚动速度
    </playback>
    <selected_color>1C1A1C</selected_color>选中区域颜色
    <bg_color>666666</bg_color>背景色
  </scroller>
  
  <background>
    <color>000000</color>整体背景色
    <alpha>100</alpha>过滤度
  </background>  
  
  <date_formats>日期显示格式
    <x_axis>X轴上的日期
        <days>MM月DD日</days>天样式
      <months>MM月</months>月样式
      <years>YYYY年</years>年样式
    </x_axis>
    <legend>图例上的日期
      <days>YYYY年MM月DD日</days>天样式
      <months>MM月</months>月样式
      <weeks>YYYY年MM月DD日</weeks>年样式
    </legend>
  </date_formats>
</settings>
分享到：
| [mongodb] java操作mongodb
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    amchart-geo-map

    标题 "amchart-geo-map" 暗示我们讨论的是一个与地图图表相关的库，特别是基于AmCharts的地理映射解决方案。AmCharts是一家提供交互式图表、地图和仪表盘组件的公司，他们的产品广泛用于数据可视化。在JavaScript...

    angular-amchart-example-simple:以非常简单的方式与AmChart成角度！

    带有AmCharts的AngularJs 介绍 最近，我需要使用AmCharts库在使用AngularJs的系统上创建一些图形。 我在寻找它，但是找不到能解决我问题的完整...&lt; amchart ng-model =' areaStacked '&gt; &lt;/ amchart&gt; /*Em sua contro

    amchart -5 Radar & Polar(flash chart 图表)

    6. **amradar** - 可能是一个文件或目录，专门针对Radar图表的配置、数据或额外示例。 **知识点详解：** 1. **Radar Chart（雷达图）**：雷达图通常用于比较多个变量在同一尺度下的表现。在雷达图中，每个轴代表一...

    amchart -2 Line & Area(flash chart 图表)

    **标题详解：**"amchart -2 Line & Area(flash chart 图表)" 是一个基于Flash技术的图表库，专门用于创建线形图和面积图。这个库提供了丰富的可视化功能，适用于展示时间序列数据或者比较不同类别的数据变化趋势。...

    amchart配置文件学习

    在"amchart配置文件学习"的主题中，我们将深入探讨如何理解和使用AmCharts的配置文件来定制你的图表。 配置文件通常以XML格式存在，例如amline_settings_qhd.xml，这可能是一个特定于线图（line chart）的配置设置...

    amchart

    7. **JavaScript API**：除了XML配置外，AmChart还提供了JavaScript API，允许在运行时动态更新图表，例如添加、删除或修改数据，实现更灵活的数据可视化。 通过以上步骤，开发者能够在.NET环境中利用AmChart轻松...

    amChart

    **amChart 概述** `amChart` 是一个强大的数据可视化工具，专为创建交互式图表和图形而设计。它支持多种平台，包括 Web、移动应用以及 Flex 应用程序。`flex amChart` 特别是针对 Adobe Flex 开发者，提供了在 Flex...

    amchart使用方法

    2. **填写激活码**：在该文本文件中输入激活码 `"AMCHART-LNKS-1966-6679-1965-1082"`。 #### 三、Amchart 的特点 Amcharts 提供了丰富的特性和定制选项，以满足不同场景的需求： - **动画或静态**：支持创建动态...

    amchart -3 Pie & Donut(flash chart 图表)

    标题中的"amchart -3 Pie & Donut(flash chart 图表)"指的是AmCharts的第三版，专门用于创建饼图和甜甜圈图的Flash版本。AmCharts 3 提供了一系列的图表类型，包括但不限于饼图和甜甜圈图，但在这个特定的资源包中，...

    amchart -1 Column & Bar(flash chart 图表)

    **知识点详解** 标题中的"amchart -1 Column & Bar(flash chart 图表)"是指一个基于Flash技术的图表库，主要用于创建柱状图。Amcharts是一个流行的JavaScript和Flash图表解决方案，它提供了一系列美观、互动的数据...

    amchart技术说明

    ### Amchart技术详解 #### 一、Amchart概述 Amchart是一种基于Flash的图表组件，由Admir Kolendarev创建，旨在为用户提供灵活且视觉吸引力强的数据可视化解决方案。Amchart不仅提供了丰富的图表类型，包括折线图、...

    amchart -6 Stock(flash chart 图表)

    "amchart -6 Stock(flash chart 图表)" 指的是 AmCharts 的一个版本，专门用于生成股票图表，它采用 Flash 技术来展示动态、实时的股市数据。 在描述中提到的“Stock图”，是指一种用于显示股票市场数据的图表类型...

    react-amchart-basic

    总结来说，`react-amchart-basic`提供了一个基础框架，让你能够轻松地在React应用中集成AmCharts图表功能。通过npm安装、Gulp自动化构建以及MIT许可证的使用，这个库为开发者提供了便利和灵活性。在实际开发中，可以...

    amchart -7 ASP.NET Controls(flash chart 图表)

    4. `sampleWebSite`：这是一个示例网站项目，开发者可以通过查看和运行这个项目来学习如何在实际的ASP.NET Web应用中集成和配置AmCharts控件。 综合以上信息，我们可以知道，这个压缩包提供了AmCharts第七版的ASP...

    angular-amchart:要使用的模块或非角度的AmChart

    与AngularJS一起使用的AmChart模块。 很简单的！！！！ 易于使用 您使用此模块的方法非常简单！ 模块名称为[AngularAmChart] 将模块放在bower.js中的依赖项中 { "angular-amchart" : "~1.0.5" } 然后使用文件 /...

    AmChart,MSChart实例教程

    在"asp_net中对amCharts(_net版)图形报表的使用 - 艾梦尔 - 博客园.htm"这篇文章中，作者详细介绍了如何在ASP.NET项目中集成AmChart，包括设置图表、数据绑定和配置动画效果。 MSChart则是微软提供的一个图表控件，...

    AmChart折线图例子（详细）

    AmChart是一款强大的JavaScript图表库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，适用于数据可视化展示。在这个"AmChart折线图例子（详细）"中，我们将深入探讨如何使用AmChart创建一个详细的...

    AmChart中文API

    amcharts 要一个“配置文件”（setting.xml），一个数据文件(amile_data.xml)， 一个 SWFObject.js，一个对应的 SWF 就可以生成漂亮的统计报表了 1 SWFObject v1.5的对象结构 view plaincopy to clipboardprint? ...

    amchart c#图表文件

    c#用来做图表的免费插件代码amchart插件 图表文件

    amchart破解下载，去掉水印

    amchart破解，去掉水印

Magicbox
Global site tag (gtag.js) - Google Analytics