【转】Flash图表AnyChart应用教程一：创建交互式数字仪表盘

最新推荐文章于 2021-06-08 17:13:04 发布

原创最新推荐文章于 2021-06-08 17:13:04 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据库

Java 同时被 2 个专栏收录

34 篇文章

订阅专栏

Web

22 篇文章

订阅专栏

仪表盘是商业智能领域必不可少的一个工具，然而大多数企业仪表盘目前仍然需要自定义创建。现在，Flash图表AnyChart 的AnyChart Flash Component Dashboard mode 提供了一种创建仪表盘的新方式。所有通过AnyChartFlash图表组件创建的图表都要用一个单一的swf文件渲染，然后将图表应用到网页中。本教程将手把手教你用AnyChart Flash组件创建一个数字仪表盘。

1、选择要显示的数据

假设你要在年会上给股东展示报表，你手头有产品的销售数据、盈利数据、产品流行排行榜等数据资料，你首先要从这些繁杂的资料当中选出你想要展示的数据。

2、选择布局

通常，在确定最完美的布局之前你最好先在纸上简单的画一画，做到心中有数：

仪表盘,商业走势图,图表

画出仪表盘的大致布局：

仪表盘,商业走势图,图表

3、转换数据

接下来用 AnyChart - XML配置文件转换数据。首先需要将数据转换成XML，代码示例：

<anychart>
  <charts>
    <!-- Set plot_type to display chart as Doughnut-->
    <chart plot_type="Doughnut" template="template_bg">
      <data>
        <!-- One data series to show pubs revenue -->
        <series>
          <point name="Nevada Cocktail Lounge" y="4.173" />
          <point name="Washington Highway Pub" y="3.77" />
          <point name="Florida Beer Restaurant" y="3.5" />
          <point name="Texas SteakHouse" y="4.14" />
          <point name="Georgia Ale House" y="1.675" />
        </series>
      </data>
      <data_plot_settings>
        <pie_series style="Aqua">
          <!-- Enable tooltips and set them to show revenue, percentage and pub name -->
          <tooltip_settings enabled="true">
            <format>{%Name} / ${%YValue}{numDecimals:2} mil. / {%YPercentOfSeries}{numDecimals:2}%</format>
          </tooltip_settings>
          <!-- Enable labels and set them to show percentage -->
          <label_settings enabled="true" mode="inside">
            <position anchor="Center" valign="Center" halign="Center" />
            <background enabled="false" />
            <font color="White">
              <effects enabled="True">
                <drop_shadow enabled="True" />
              </effects>
            </font>
            <format>{%YPercentOfSeries}</format>
          </label_settings>
        </pie_series>
      </data_plot_settings>
      <chart_settings>
        <!-- Set chart title text -->
        <title>
          <text>Pubs Revenue Ratio</text>
        </title>
        <!-- enable legend to show data points -->
        <legend enabled="True" ignore_auto_item="True">
          <title enabled="false" />
          <items>
            <item source="Points" />
          </items>
        </legend>
      </chart_settings>
    </chart>
  </charts>
</anychart>

这样我们就创建了一个<series>节点，新增几个<point>节点，并设置名称，定义<chart>节点中的plot_type="Doughnut"，设置格式化的工具提示、标签和图表标题，效果如图所示：

圆环图

然后将这个配置文件保存为pubs-revenue.xml.

4、转换布局

前面我们在纸上设计了一下仪表盘的布局，下面我们将纸上布局转换到AnyChart仪表盘布局配置中。

1）在<anychart>节点中创建<dashboard>节点，创建<view type="Dashboard">，示例如下：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <title>
        <text>"Duff Pubs" Annual Report</text>
      </title>
    </view>
  </dashboard>
</anychart>

2）我们有三个图表，所以需要三个<view type="Chart">：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <view type="Chart" />
      <view type="Chart" />
      <view type="Chart" />
    </view>
  </dashboard>
</anychart>

3）首先我们将这三个图表水平放置：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <hbox width="100%" height="100%">
        <view type="Chart" />
        <view type="Chart" />
        <view type="Chart" />
      </hbox>
    </view>
  </dashboard>
</anychart>

4）然后将其中两个垂直放置，并调整宽高：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <hbox width="100%" height="100%">
        <vbox width="50%" height="100%">
          <view type="Chart" width="100%" height="50%" />
          <view type="Chart" width="100%" height="50%" />
        </vbox>
        <view type="Chart" width="50%" height="100%" />
      </hbox>
    </view>
  </dashboard>
</anychart>

5、将数据和布局放在一起

准备好了数据和布局后，接下来就要为仪表盘视图指定特定的数据源：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <hbox width="100%" height="100%">
        <vbox width="50%" height="100%">
          <view source="./dashboard/profit-and-sales.xml" type="Chart" width="100%" height="50%" />
          <view source="./dashboard/pubs-revenue.xml" type="Chart" width="100%" height="50%" />
        </vbox>
        <view source="./dashboard/brands-chart.xml" type="Chart" width="50%" height="100%" />
      </hbox>
    </view>
  </dashboard>
</anychart>

6、交互性概念规划

我们需要创建通过点击某个点就能显示出具体销售数据的仪表盘，如下图：

仪表盘,商业走势图,图表

7、交互式仪表盘的数据

现在我们需要创建更多的XML文件。
注：可以用AnyChart的图表模板轻松实现图表配置

8、交互式仪表盘的实现

我们可以用AnyChart Actions实现仪表盘数据的更新，在这个仪表盘中我们只用 "updateView"，就能更新仪表盘的某个视图。修改图表的数据部分，如下示例：

<data>
  <series>
    <actions>
      <action type="updateView" view_id="Profit Details" source_mode="externalData" source="{%Name}_profit-and-sales.xml" />
      <action type="updateView" view_id="Brands Details" source_mode="externalData" source="{%Name}_brands-poularity-chart.xml" />
    </actions>
    <point name="Nevada Cocktail Lounge" y="4.75" />
    <point name="Washington Highway Pub" y="3.75" />
    <point name="Florida Beer Restaurant" y="3.4" />
    <point name="Texas SteakHouse" y="3.1" />
    <point name="Georgia Ale House" y="2" />
  </series>
</data>

最后我们要做的就是安排新的仪表盘布局，设置适当的图表来源和视图名称(用于更新操作)：

<anychart>
  <dashboard>
    <view type="Dashboard">
      <vbox width="100%" height="100%">
        <hbox width="50%" height="100%">
          <view source="./dashboard/pubs-revenue.xml" type="Chart" width="100%" height="50%" />
          <vbox height="100%" width="50%">
            <view source="./dashboard/profit-and-sales.xml" type="Chart" width="100%" height="50%" />
          </vbox>
        </hbox>
        <view name="Brands Details" source="./dashboard/brands-chart.xml" type="Chart" width="50%" height="100%" />
      </vbox>
    </view>
  </dashboard>
</anychart>