2. 程式人生 > >Highcharts 標示區曲線圖；Highcharts 對數圖表；Highcharts 時間間隔圖表

Highcharts 標示區曲線圖；Highcharts 對數圖表；Highcharts 時間間隔圖表

阿新 • • 發佈：2017-11-28
near have 2.0 series mst point har etime ddl

Highcharts 標示區曲線圖

配置

使用 yAxis.plotBands 屬性來配置標示區。區間範圍使用 ‘from‘ 和 ‘to‘ 屬性。顏色設置使用 ‘color‘ 屬性。標簽樣式使用 ‘label‘ 屬性。

配置信息：

var yAxis = {
   title: {
      text: ‘Wind speed (m/s)‘
   },
   min: 0,
   minorGridLineWidth: 0,
   gridLineWidth: 0,
   alternateGridColor: null,
   plotBands: [{ // Light air
      from: 0.3,
      to: 1.5,
      color: ‘rgba(68, 170, 213, 0.1)‘,
      label: {
         text: ‘Light air‘,
         style: {
            color: ‘#606060‘
         }
      }
   }, { // Light breeze
      from: 1.5,
      to: 3.3,
      color: ‘rgba(0, 0, 0, 0)‘,
      label: {
         text: ‘Light breeze‘,
         style: {
            color: ‘#606060‘
         }
      }
   }, { // Gentle breeze
      from: 3.3,
      to: 5.5,
      color: ‘rgba(68, 170, 213, 0.1)‘,
      label: {
         text: ‘Gentle breeze‘,
         style: {
            color: ‘#606060‘
         }   
      }
   }, { // Moderate breeze
      from: 5.5,
      to: 8,
      color: ‘rgba(0, 0, 0, 0)‘,
      label: {
         text: ‘Moderate breeze‘,
         style: {
            color: ‘#606060‘
         }
      }
   }, { // Fresh breeze
      from: 8,
      to: 11,
      color: ‘rgba(68, 170, 213, 0.1)‘,
      label: {
         text: ‘Fresh breeze‘,
         style: {
            color: ‘#606060‘
         }
      }
   }, { // Strong breeze
      from: 11,
      to: 14,
      color: ‘rgba(0, 0, 0, 0)‘,
      label: {
         text: ‘Strong breeze‘,
         style: {
            color: ‘#606060‘
         }
      }   
   }, { // High wind
      from: 14,
      to: 15,
      color: ‘rgba(68, 170, 213, 0.1)‘,
      label: {
         text: ‘High wind‘,
         style: {
            color: ‘#606060‘
         }
      }
   }]
};

實例

文件名：highcharts_spline_bands.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‘      
   }; 
   var title = {
      text: ‘Wind speed during two days‘   
   };
   var subtitle = {
      text: ‘October 6th and 7th 2009 at two locations in Vik i Sogn, Norway
 
‘
   };
   var xAxis = {
      type: ‘datetime‘,
      labels: {
         overflow: ‘justify‘
      }
   };
   var yAxis = {
      title: {
         text: ‘Wind speed (m/s)‘
      },
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null,
      plotBands: [{ // Light air
         from: 0.3,
         to: 1.5,
         color: ‘rgba(68, 170, 213, 0.1)‘,
         label: {
            text: ‘Light air‘,
            style: {
               color: ‘#606060‘
            }
         }
      }, { // Light breeze
         from: 1.5,
         to: 3.3,
         color: ‘rgba(0, 0, 0, 0)‘,
         label: {
            text: ‘Light breeze‘,
            style: {
               color: ‘#606060‘
            }
         }
      }, { // Gentle breeze
         from: 3.3,
         to: 5.5,
         color: ‘rgba(68, 170, 213, 0.1)‘,
         label: {
            text: ‘Gentle breeze‘,
            style: {
               color: ‘#606060‘
            }   
         }
      }, { // Moderate breeze
         from: 5.5,
         to: 8,
         color: ‘rgba(0, 0, 0, 0)‘,
         label: {
            text: ‘Moderate breeze‘,
            style: {
               color: ‘#606060‘
            }
         }
      }, { // Fresh breeze
         from: 8,
         to: 11,
         color: ‘rgba(68, 170, 213, 0.1)‘,
         label: {
            text: ‘Fresh breeze‘,
            style: {
               color: ‘#606060‘
            }
         }
      }, { // Strong breeze
         from: 11,
         to: 14,
         color: ‘rgba(0, 0, 0, 0)‘,
         label: {
            text: ‘Strong breeze‘,
            style: {
               color: ‘#606060‘
            }
         }   
      }, { // High wind
         from: 14,
         to: 15,
         color: ‘rgba(68, 170, 213, 0.1)‘,
         label: {
            text: ‘High wind‘,
            style: {
               color: ‘#606060‘
            }
         }
      }]
   };
   var tooltip = {
      valueSuffix: ‘ m/s‘
   };
   var plotOptions = {
      spline: {
         lineWidth: 4,
         states: {
            hover:{
               lineWidth:5}},
         marker:{
            enabled:false},
         pointInterval:3600000,// one hour
         pointStart:Date.UTC(2009,9,6,0,0,0)}};var series=[{
         name:‘Vik i Sogn‘,      
         data:[4.3,5.1,4.3,5.2,5.4,4.7,3.5,4.1,5.6,7.4,6.9,7.1,7.9,7.9,7.5,6.7,7.7,7.7,7.4,7.0,7.1,5.8,5.9,7.4,8.2,8.5,9.4,8.1,10.9,10.4,10.9,12.4,12.1,9.5,7.5,7.1,7.5,8.1,6.8,3.4,2.1,1.9,2.8,2.9,1.3,4.4,4.2,3.0,3.0]},{
         name:‘Norway‘,
         data:[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.1,0.0,0.3,0.0,0.0,0.4,0.0,0.1,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.6,1.2,1.7,0.7,2.9,4.1,2.6,3.7,3.9,1.7,2.3,3.0,3.3,4.8,5.0,4.8,5.0,3.2,2.0,0.9,0.4,0.3,0.5,0.4]}];var navigation ={
      menuItemStyle:{
         fontSize:‘10px‘}}var json ={};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.navigation = navigation;
   $(‘#container‘).highcharts(json);});</script></body></html>
View Code

以上實例輸出結果為：

技術分享圖片

Highcharts 時間間隔圖表

實例

文件名：highcharts_spline_time.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‘      
   }; 
   var title = {
      text: ‘Snow depth at Vikjafjellet, Norway‘   
   };
   var subtitle = {
      text: ‘Irregular time data in Highcharts JS‘
   };
   var xAxis = {
      type: ‘datetime‘,
      dateTimeLabelFormats: { // don‘t display the dummy year
         month: ‘%e. %b‘,
         year: ‘%b‘
      },
      title: {
         text: ‘Date‘
      }
   };
   var yAxis = {
      title: {
         text: ‘Snow depth (m)‘
      },
      min: 0
   };
   var tooltip = {
      headerFormat: ‘<b>{series.name}</b><br>‘,
      pointFormat: ‘{point.x:%e. %b}: {point.y:.2f} m‘
   };
   var plotOptions = {
      spline: {
         marker: {
            enabled: true
         }
      }
   };
   var series= [{
         name: ‘Winter 2007-2008‘,
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
         data: [
             [Date.UTC(1970,  9, 27), 0   ],
             [Date.UTC(1970, 10, 10), 0.6 ],
             [Date.UTC(1970, 10, 18), 0.7 ],
             [Date.UTC(1970, 11,  2), 0.8 ],
             [Date.UTC(1970, 11,  9), 0.6 ],
             [Date.UTC(1970, 11, 16), 0.6 ],
             [Date.UTC(1970, 11, 28), 0.67],
             [Date.UTC(1971,  0,  1), 0.81],
             [Date.UTC(1971,  0,  8), 0.78],
             [Date.UTC(1971,  0, 12), 0.98],
             [Date.UTC(1971,  0, 27), 1.84],
             [Date.UTC(1971,  1, 10), 1.80],
             [Date.UTC(1971,  1, 18), 1.80],
             [Date.UTC(1971,  1, 24), 1.92],
             [Date.UTC(1971,  2,  4), 2.49],
             [Date.UTC(1971,2,11),2.79],[Date.UTC(1971,2,15),2.73],[Date.UTC(1971,2,25),2.61],[Date.UTC(1971,3,2),2.76],[Date.UTC(1971,3,6),2.82],[Date.UTC(1971,3,13),2.8],[Date.UTC(1971,4,3),2.1],[Date.UTC(1971,4,26),1.1],[Date.UTC(1971,5,9),0.25],[Date.UTC(1971,5,12),0]]},{
         name:‘Winter 2008-2009‘,
         data:[[Date.UTC(1970,9,18),0],[Date.UTC(1970,9,26),0.2],[Date.UTC(1970,11,1),0.47],[Date.UTC(1970,11,11),0.55],[Date.UTC(1970,11,25),1.38],[Date.UTC(1971,0,8),1.38],[Date.UTC(1971,0,15),1.38],[Date.UTC(1971,1,1),1.38],[Date.UTC(1971,1,8),1.48],[Date.UTC(1971,1,21),1.5],[Date.UTC(1971,2,12),1.89],[Date.UTC(1971,2,25),2.0],[Date.UTC(1971,3,4),1.94],[Date.UTC(1971,3,9),1.91],[Date.UTC(1971,3,13),1.75],[Date.UTC(1971,3,19),1.6],[Date.UTC(1971,4,25),0.6],[Date.UTC(1971,4,31),0.35],[Date.UTC(1971,5,7),0]]},{
         name:‘Winter 2009-2010‘,
         data:[[Date.UTC(1970,9,9),0],[Date.UTC(1970,9,14),0.15],[Date.UTC(1970,10,28),0.35],[Date.UTC(1970,11,12),0.46],[Date.UTC(1971,0,1),0.59],[Date.UTC(1971,0,24),0.58],[Date.UTC(1971,1,1),0.62],[Date.UTC(1971,1,7),0.65],[Date.UTC(1971,1,23),0.77],[Date.UTC(1971,2,8),0.77],[Date.UTC(1971,2,14),0.79],[Date.UTC(1971,2,24),0.86],[Date.UTC(1971,3,4),0.8],[Date.UTC(1971,3,18),0.94],[Date.UTC(1971,3,24),0.9],[Date.UTC(1971,4,16),0.39],[Date.UTC(1971,4,21),0]]}];var json ={};
   json.chart = chart;
   json.title = title;
   json.subtitle = subtitle;
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $(‘#container‘).highcharts(json);});</script></body></html>
View Code

以上實例輸出結果為：

技術分享圖片

Highcharts 對數圖表

配置

配置 yAxis.type 為 ‘logarithmic‘。它定義了 x 軸類型。可選值有 "linear", "logarithmic", "datetime" 或 "category"。默認值為linear。

yAxis
var yAxis = {
   type: ‘logarithmic‘,
   minorTickInterval: 0.1
};

實例

文件名：highcharts_line_logarithmic.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 title = {
      text: ‘對數實例(runoob.com)‘   
   };
   var xAxis = {
      tickInterval: 1
   };
   var yAxis = {
      type: ‘logarithmic‘,
      minorTickInterval: 0.1
   };
   var tooltip = {
      headerFormat: ‘<b>{series.name}</b><br>‘,
      pointFormat: ‘x = {point.x}, y = {point.y}‘
   };
   var plotOptions = {
      spline: {
         marker: {
            enabled: true
         }
      }
   };
   var series= [{
         name: ‘data‘,
         data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
         pointStart: 1
      }
   ];     
      
   var json = {};   
   json.title = title;   
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $(‘#container‘).highcharts(json);
  
});
</script>
</body>
</html>
View Code

以上實例輸出結果為：

技術分享圖片

Highcharts 標示區曲線圖；Highcharts 對數圖表；Highcharts 時間間隔圖表

相關推薦

Highcharts 標示區曲線圖；Highcharts 對數圖表；Highcharts 時間間隔圖表

near have 2.0 series mst point har etime ddl Highcharts 標示區曲線圖 配置 使用 yAxis.plotBands 屬性來配置標示區。區間範圍使用 ‘from‘ 和 ‘to‘ 屬性。顏色

Highcharts 標示區曲線圖

一 程式碼 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 標示區曲線圖</title> <script src="http://apps.bdimg

DWR(AJAX)+Highcharts繪制曲線圖，餅圖

logging 數據類型 hid 一個 ext js xml 通過 for 源代碼下載 基本需求: 1. 在前臺會用DWR框架(或者AJAX)調用Java後臺代碼獲取要在Hightcharts展示的數據 2. 了解JSON(JavaScript

Highcharts繪制曲線圖小結

exp text port ber 維數 list raw ges 6.2 Higcharts繪制曲線圖很好用！ 雖然說Highcharts官網有API，還有例子，但是我相信只看那些例子並不能很好的繪制出理想的曲線圖。 剛接觸這個領域，學有心得，理解不到位之處希望大家多多指

Highcharts 帶標記曲線圖

一 程式碼 <html> <head> <meta charset="UTF-8" /> <title>帶標記曲線圖</title> <script src="http://apps.bdimg.com/libs/j

前端圖表製作——HighCharts圖表入門

HighCharts圖表入門 HighCharts的作用 ​ 在JavaEE企業級專案開發中，很多專案都會用到資料的統計和圖表的展示功能，如：各種股票系統，銀行的資金結算，公司的財務報表，等等。如何快速高效的開發這些圖表是一件麻煩的事。 HighCharts可以

圖表外掛Highcharts的動態化賦值，實現圖表資料的動態化設定顯示

在很早之前就介紹過圖表外掛Highcharts的使用了，在2014年的隨筆《基於MVC4+EasyUI的Web開發框架經驗總結（4）--使用圖表控制元件Highcharts》，這裡基本上都介紹的比較完整，基本的設定也沒有太大的差異，本篇介紹的是基於Bootstrap開發框架的介面處理，以及對圖表外掛Highc

【jQuery】相容IE6的圖表外掛Highcharts

在網頁中有時候需要畫出統計圖，尤其是一些OA系統中，這樣能夠給各位看官一個直觀的資料顯示。圖表用很多東西都能畫出來，比如JSP可以利用JAVA本身就有的繪圖函式，php有jpgraph外掛，具體請看《【php】使用jpgraph完成投票系統的普通使用者部分》（點選開啟連結）

硬盤扇區、柱面的基本知識；

同心圓 ref lin png 一段 區域 成了 存儲 style 轉自：http://www.intohard.com/article-436-1.html 概述：本文介紹硬盤的扇區基本知識， 同時對邏輯扇區和物理扇區的概念做出說明 盤片上涉及的基本概念 整個硬盤上一般有

指令篇：文件與文件系統的壓縮與解壓與打包(歸檔)與解壓___gzip、zcat；bzip2、bzcat；zip； tar

roo 壓縮命令 過時 bsp 演示 組合 localhost 打包 mov 一、文件與文件系統的壓縮： 　　1、單文件的四種壓縮命令： 　　　　①、Compress　　（過時了，不做過多說明） 　　　　②、gzip,zcat　　 （gzip：壓縮。zcat：查看）　 　　

Python（輸入、輸出；簡單運算符；流程控制）

字符 print 輸入密碼 優先 註解 user python span gif 一 輸入輸出 python3中統一都是input，python2中有raw_input等同於python3的input，另外python2中也有input 1.res=input("pytho

1.1 學習之初；1.2 約定；1.3 認識Linux；1.4 創建虛擬機；1.5安裝centos7

安裝centos7給自己定個位：1. 定位：為更好地就業，不被社會淘汰，做一名合格的運維工程師2. 目標：半年左右學習完成基礎，之後跳槽運維工作，工作中多多積累經驗3. 工資：第一次奔著8k+起，一到兩年提升到15k-20k學習：1. 班主任每天安排的學習課程完成後，如果有空余時間精力再繼續預習新的課程，每天

10.6 監控io性能；10.7 free；10.8 ps；10.9 查看網絡狀態；10.10 抓包

mysq 技術 占用 fields 使用情況 正常的 yum root rep 擴展：tcp三次握手四次揮手 http://www.doc88.com/p-9913773324388.htmltshark幾個用法：http://www.aminglinux.com/bbs/

鏈路捆綁； 遠程訪問；鏈路備份；不通vlan通信；靜態 默認路由綜合實驗

.拓撲如下:配置步驟以及思路：配置客戶端主機IP在SW1創建vlan 12 ；SW2創建 vlan 12 23；SW3創建 vlan 23；配置IP 在SW1 2 3創建vlan 11 21 31配置IP；將SW1 2 3的上方端口加入ACCESS 對應VLAN在R1 gi 1 2 3接口 配置IP在R1寫靜

11.22 訪問日誌不記錄靜態文件；11.23 訪問日誌切割；11.24 靜態元素過期時間

訪問日誌不記錄靜態文件 訪問日誌切割 靜態元素過期時間 擴展： apache日誌記錄代理IP以及真實客戶端IP ：http://ask.apelearn.com/question/960apache只記錄指定URI的日誌 ： http://ask.apelearn.com/question/981

linux學習第二周；rpm包管理；yum管理；定制yum庫

develop baseurl href 互聯 rpm -ivh 軟件包 .com 操作 步驟 rpm安裝（無法解決包之間依賴性問題）： rpm -ivh # 安裝包（需要給出包絕對路徑） rpm -V #用作包校驗，包無變化則不執行操作，包被改變則顯示包改變的屬性 rpm

egrep；元字符；字符匹配

則表達式 表達 gre 元字符 file 正則表達 pattern options att egrep[OPTIONS] PATTERN [FILE...] 擴展正則表達式的元字符： 字符匹配： . 任意單個字符 [] 指定範圍的字符 [^] 不在指定範圍的字符eg

Apache網頁優化與安全優化（網頁壓縮；網頁緩存；網頁防盜鏈；隱藏版本信息）

信任站點 響應 win ef6 生效 傳輸 window 重要 move 1，網頁壓縮網站的訪問速度是由多個因素所共同決定的包括：1）應用程序的響應速度2）網絡帶寬3）服務器性能4）與客戶端之間的網絡傳輸速度等等其中最重要的就是Apache本身的響應速度，因此提升網站性能第

字符串比較方法：“==”操作符；RefernceEquals；String.Equals方法；String.Compare方法；String.CompareOrdinal方法。

影響 線程棧 ron 圖片 分布 根據 png -c span 一、“==”操作符；String.Equals；ReferenceEquals 方法 　　1、在編程中實際上我們只需要這兩種比較，c#中類型也就這兩種 　　（1）值類型的比較：一般我們就是判斷兩個值類型實例各自

輸入10個整數，將其中最小的數與第一個數對換，把最大的數與最後一個數對換。寫三個函式； ①輸入10個數；②進行處理；③輸出10個數。

import java.util.Scanner; public class Main {     public static void main(String[] args){         Scanner sc = new Scann