Highcharts 動態(tài)圖

們將為大家介紹 Highcharts 的動態(tài)圖。

我們在前面已經(jīng)了解了 Highcharts 配置語法。接下來讓我們來看下 Highcharts 的其他配置。

每秒更新曲線圖

chart.events

chart.event 屬性中添加 load 方法（圖表加載事件）。在 1000 毫秒內(nèi)隨機產(chǎn)生數(shù)據(jù)點并生成圖表。

chart: {
 events: {
 load: function () {
 // 圖表每秒更新一次
 var series=this.series[0];
 setInterval(function () {
 var x=(new Date()).getTime(), // 當期時間
 y=Math.random();
 series.addPoint([x, y], true, true);
 }, 1000);
 }
 }}

實例

文件名：highcharts_dynamic_spline.htm

<html><head><meta charset="UTF-8" /><title>Highcharts 教程 | 菜鳥教程(runoob.com)</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script></head><body><div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div><script language="JavaScript">$(document).ready(function() { 
 var chart={
 type: 'spline', animation: Highcharts.svg, // don't animate in IE < IE 10.
 marginRight: 10, events: {
 load: function () {
 // set up the updating of the chart each second
 var series=this.series[0];
 setInterval(function () {
 var x=(new Date()).getTime(), // current time
 y=Math.random();
 series.addPoint([x, y], true, true);
 }, 1000);
 }
 }
 };
 var title={
 text: 'Live random data' 
 }; 
 var xAxis={
 type: 'datetime',
 tickPixelInterval: 150
 };
 var yAxis={
 title: {
 text: 'Value'
 },
 plotLines: [{
 value: 0,
 width: 1,
 color: '#808080'
 }]
 };
 var tooltip={
 formatter: function () {
 return '<b>' + this.series.name + '</b><br/>' +
 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
 Highcharts.numberFormat(this.y, 2);
 }
 };
 var plotOptions={
 area: {
 pointStart: 1940,
 marker: {
 enabled: false,
 symbol: 'circle',
 radius: 2,
 states: {
 hover: {
 enabled: true
 }
 }
 }
 }
 };
 var legend={
 enabled: false
 };
 var exporting={
 enabled: false
 };
 var series=[{
 name: 'Random data',
 data: (function () {
 // generate an array of random data
 var data=[],time=(new Date()).getTime(),i;
 for (i=-19; i <=0; i +=1) {
 data.push({
 x: time + i * 1000,
 y: Math.random()
 });
 }
 return data;
 }()) 
 }]; 
 var json={}; 
 json.chart=chart;
 json.title=title; 
 json.tooltip=tooltip;
 json.xAxis=xAxis;
 json.yAxis=yAxis;
 json.legend=legend; 
 json.exporting=exporting; 
 json.series=series;
 json.plotOptions=plotOptions;
 Highcharts.setOptions({
 global: {
 useUTC: false
 }
 });
 $('#container').highcharts(json);
 });</script></body></html>

Highcharts 餅圖

通過點擊添加數(shù)據(jù)

chart.events

在 chart.event 屬性中添加 click 方法（整個圖表的繪圖區(qū)上所發(fā)生的點擊事件）。該方法在圖表繪圖區(qū)上發(fā)生點擊時會添加新的數(shù)據(jù)點。

chart: {
 events: {
 click: function (e) {
 // 獲取點擊坐標和數(shù)據(jù)項
 var x=e.xAxis[0].value,
 y=e.yAxis[0].value,
 series=this.series[0];
 // 添加點擊的坐標
 series.addPoint([x, y]);
 }
 }}

實例

文件名：highcharts_dynamic_click.htm

能：

modbus讀取數(shù)據(jù)
數(shù)據(jù)寫入mysql數(shù)據(jù)庫中
查詢設定時間段的數(shù)據(jù)
數(shù)據(jù)顯示為曲線

Node-RED界面：

UI界面：

mysql數(shù)據(jù)庫結(jié)構(gòu)：

資源地址：han-link.cn/4165.html

#妙筆生花創(chuàng)作挑戰(zhàn)#

挑戰(zhàn)30天在頭條寫日記#

快速上手

獲取 Apache ECharts

Apache ECharts 支持多種下載方式，可以在下一篇教程安裝中查看所有方式。這里，我們以從 jsDelivr CDN 上獲取為例，介紹如何快速安裝。

在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js，點擊并保存為 echarts.js 文件。

引入 Apache ECharts

在剛才保存 echarts.js 的目錄新建一個 index.html 文件，內(nèi)容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

打開這個 index.html，你會看到一片空白。但是不要擔心，打開控制臺確認沒有報錯信息，就可以進行下一步。

繪制一個簡單的圖表

在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之后，添加：

<body>
  <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入剛剛下載的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 為 ECharts 準備一個定義了寬高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于準備好的dom，初始化echarts實例
      var myChart=echarts.init(document.getElementById('main'));

      // 指定圖表的配置項和數(shù)據(jù)
      var option={
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
          data: ['銷量']
        },
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
      myChart.setOption(option);
    </script>
  </body>
</html>

這樣你的第一個圖表就誕生了！

常用圖表類型

柱狀圖:基礎柱狀圖,堆疊柱狀圖,動態(tài)排序柱狀圖,階梯瀑布圖

折線圖:基礎折線圖,堆疊折線圖,區(qū)域面積圖,平滑曲線圖,階梯線圖

餅圖:基礎餅圖,圓環(huán)圖南丁格爾圖（玫瑰圖）

散點圖:基礎散點圖

服務端渲染：

數(shù)據(jù)處理

項目地址：

https://github.com/apache/echarts

在線咨詢

上一篇：四種防止模態(tài)框彈出時頁面滾動的方法
下一篇：Element UI 省市區(qū)數(shù)據(jù)聯(lián)動

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商