AnyChart建立實時儀表

時間  2019-11-11
標籤 anychart 建立 實時 儀表 简体版
原文   原文鏈接

                      AnyChart建立實時儀表javascript

簡述：html

AnyChart是一款基於Flash和HTML5的圖表、儀表控件，所包含的圖表類型衆多和跨平臺以及跨瀏覽器是該產品的主要特色和優勢，另外該產品基於XML文件做爲數據傳輸的載體對於開發人員來講極易上手，極大的縮短了項目的開發週期，而且該產品所達到的顯示效果也是圖表產品中頂尖的。java

 

下面咱們來介紹，若是使用AnyChart快速地開發出實時顯示或者更新的儀表圖。瀏覽器

 

  1. 首先您要下載AnyChart試用版，該試用版是完整功能版，沒有使用上的時間限制，只是有很大的試用版水印覆蓋在圖表上，對開發人員瞭解該產品功能沒有任何阻礙，開發人員也能夠使用試用版進行項目開發，等項目開發完再買正式版來替換試用版文件也是可行的。
  2. AnyChart中的儀表支持實時數據的顯示和更新，主要是使用到AnyChart提供的updatePointData("Gauge Name", "Pointer Name", data);函數，函數中第一個參數指的是儀表的名字，第二個參數使用的是儀表中指針的名字，這兩個參數都是在您程序的XML文件中設置好，以下：

<gauges>dom

    <gauge>函數

      <circular name="update">ui

上面的"update"，就是函數的第一個參數。指針

<pointers>component

<pointer type="needle" value="40" color="green" name="p">xml

   上面的"value"就是函數的第二個參數。

  函數的第三個參數data的格式必須是{value：變量或者數值}。

如咱們要更新指針數值到60，咱們能夠簡單的寫爲：

 

chart.updatePointData("update ", "p", {value：60});

  1. 若是您仍是沒有理解，您能夠看下下面咱們提供的一個簡單的完整事例。

XML完整代碼以下：

<?xml version="1.0" encoding="UTF-8"?>

<anychart>

 

  <gauges>

    <gauge>

      <circular name="update">

        <axis>

          <scale minimum="0" maximum="100" major_interval="10" />

        </axis>

        <pointers>

          <pointer type="needle" value="40" color="green" name="value">

            <needle_pointer_style point_thickness="3" thickness="3" />

          </pointer>

        </pointers>

      </circular>

    </gauge>

  </gauges>

</anychart>

HTML完整代碼以下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>AnyChart Sample</title>

<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>

</head>

<body>

 <script type="text/javascript" language="javascript">

      //<![CDATA[

          

 

           var chart = new AnyChart('./swf/AnyChart.swf');

           chart.width = 840;

           chart.height = 611;

           chart.setXMLFile('./updateGauge.xml');

           // add listener that tracks changes in gauge

          

chart.write();

          

function update()

           {

          

           chart.updatePointData("update", "value",{value:Math.random()*100});

                                 

           }

 

           setInterval(update,1000);

 

  //]]>

    </script>

 

</body>

</html>

 

總的來講AnyChart功能仍是很強大的，而且對於開發人員來講極易上手，作出的圖表效果也很是美觀，即便是正式版產品也至關便宜，對於項目中有須要的朋友能夠去控件中國網下載試用版試用，能夠極大的縮短項目的開發週期，節約成本，若是使用中有什麼不清楚的能夠加QQ846631466

產品下載：http://www.componentcn.com/html/jbtbkj_249_5209.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程