2. 程式人生 > >highcharts設定總結

highcharts設定總結

阿新 • • 發佈：2018-12-23
var chart = Highcharts.chart('container', { chart: { type: 'line' }, title: { //標題，如不需要可以置空 text: '' }, subtitle: { //副標題 text: '' }, xAxis: { labels: { enabled: false
//是否顯示x軸的標籤 }, type: 'datetime', //如果x軸是時間，設定該項可以進行格式轉換 }, yAxis: { title: { text: '' //y軸標題 }, labels: { enabled: false
//是否顯示y軸的標籤 } }, legend: { //圖例設定 layout: 'vertical', align: 'right', verticalAlign: 'middle', width:0, enabled: false, //是否顯示 }, navigation:{ //導航，下載儲存為圖片的地方
buttonOptions:{ enabled:false } }, credits:{ enabled:false //版權資訊是否顯示 }, tooltip:{ //資料提示框 backgroundColor:'#FFFFFF', borderColor:'#cccccc', shared: true, useHTML: true, formatter:function() { //通過該方法可以返回自定義的提示內容，要同時設定上面兩項 var points = this.points; var _time = this.x; //時間格式化 _time = new Date(_time); var year = _time.getFullYear(); var month = _time.getMonth()+1; var date = _time.getDate(); year = year.toString().substr(2,2); var str_time = [date,month,year].join('/'); var header = '<b style="margin:10px 0;display:block;font-weight:700">'+ str_time +'</b><table>'; var body = ''; var footer = '</table>'; for(var i=0;i<points.length;i++){ var _color = points[i].series.color; var _y = points[i].y; var _name = points[i].series.name; //單獨給某一項設定百分比顯示 if(points[i].series.name == "CTR"){ body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'%</b></td></tr>'; } else { body+= '<tr><td style="width:30px;height:1px;background:'+ _color +';display:inline-block;margin-right:10px"></td><td style="color:'+ _color +'">'+ _name +': </td><td style="text-align: left"><b id="point_name">'+ _y +'</b></td></tr>'; } } return header+body+footer; }, xDateFormat: '%d/%m/%Y', }, plotOptions: { series: { //設定標記點的樣式 label: { connectorAllowed: false }, marker:{ enabled:false, symbol:'circle', //這裡可以設定資料點的全域性樣式，統一為某一種 radius:5, }, negativeColor:'#fff', allowPointSelect:false, cursor: 'pointer', states:{ hover:{ halo:'false' //這裡設定滑鼠移到資料點上時資料點不顯示外層圓圈 } }, //處理x軸的時間格式，要配合xAxis下面的type:'datetime'使用 pointStart: Date.UTC(2017, 0, 1), pointInterval: 24 * 3600 * 1000, } }, series: [{ //設定相關資料及其他資訊 name: 'Clicks', data: [13, 22, 27, 21, 22, 35, 41, 41,21], color:'#4d90fe', }, { name: 'Impressions', data: [24, 24, 29, 20, 32, 30, 38, 40,32], color:'#dd4b39' }, { name: 'CTR', data: [11.23, 17.34, 16.12, 19.43, 20.54, 24.65, 28.34, 30.32,42.54], color:'#ff9900' }, { name: 'Position', data: [29, 31, 39, 12, 15, 22, 34, 39,28], color:'#109618' }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } });

相關推薦

highcharts設定總結

var chart = Highcharts.chart('container', { chart: { type: 'line' }, title

眾包中關於DS模型及其擴展設定總結

介紹 PE esp tid learn 論文 oba minimax IT 1.只能處理同質任務(任務難度不同) 仍只刻畫了工人質量，沒有刻畫任務難度。 D.S. 原文 工人的質量是有一個隱混淆矩陣確定的，此矩陣定義了在確定了正確的標記的條件下工人回復任一可能標記的概率。

android 鍵盤屬性設定總結

其實很久之前就有遇到這樣一個問題，在APP中點選輸入框，經常出現鍵盤擠壓介面的問題， 之前解決後一直沒有作總結，最近又遇到了，發現網上說的大都是錯誤的，經過測試發現解決問題的配置如下，在Activity的配置中新增：android:windowSoftInputMode="stateHidden

response響應頭設定總結

/*********************************設定瀏覽器無快取******************************/ //resp.setHeader:傳送一個報頭，告訴瀏覽器當前頁面不進行快取，每次訪問的時間必須從伺服器上讀取最新

工具學習：IDEA的Setting通用設定總結

工具學習：IDEA的Setting通用設定總結 1.自動編譯開關 目錄：setting --》Build,Execution,Deployment --》Compiler 操作：將“Build project automatically”勾選 2.忽略大小寫開

Docker時間與時區設定總結

最近在使用Docker容器時，部署java程式發現時間輸出不對，在修改問題時總結如下。 　　#date [-R] 　　　　　　　　　　　　　　　　　　　　　　#檢視主機時間　　#timedatectl 　　　　　　　　　　　　　　    　　　　 　　 #檢視主機時區　　#tzselec

ssm整合application.xml檔案設定總結

application.xml檔案設定 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="

httpClient中的三種超時設定總結

在Apache的HttpClient包中，有三個設定超時的地方： / 從連線池中取連線的超時時間/ ConnManagerParams.setTimeout(params, 1000); /連線超時/ HttpConnectionParams.setConnectionTimeout(params, 200

vue 如何新增全域性函式或全域性變數以及單頁面的title設定總結

傳統的設定title的方法是：document.title = ‘title’ 但是這種寫法在iOS的微信上是不相容的 這裡設定title的方法是通過在百度搜索的所謂黑科技，避免了安卓和iOS的不相容寫法 首先在index.html中定義一個全域性的函式：

Highcharts技巧總結(持續更新)

1.動態顯示隱藏dataLables Highcharts沒有提供方法動態顯示或者隱藏dataLables，可以通過Jquery顯示或者隱藏dataLables。 顯示點值程式碼： $('#conta

Android樣式設定總結

上一篇詳細講了shape的用法，講解了怎麼用shape自定義矩形、圓形、線形和環形，以及有哪些需要注意的地方。不過，shape只能定義單一的形狀，而實際應用中，很多地方比如按鈕、Tab、ListItem等都是不同狀態有不同的展示形狀。舉個例子，一個按鈕的背景，預設時是一個形狀，按下時是一個形狀，不可操作時

highcharts設定線的粗細和資料點的大小

plotOptions: { spline: { lineWidth: 1.5, fillOpacity: 0.1, marker: { enabled: false,

android 音量獲取和設定總結

1、獲取音量值： AudioManager audioManager = (AudioManager) mContext.getSystemService(Context.AUDIO_SERVICE); int currentVolume = audioManager.g

PHPExcel一些基本設定總結

//例項化PHPExcel類庫，相當於新建一個Excel表 $objPHPExcel = new PHPExcel(); //獲取當前活動sheet $objSheet = $objPHPExcel->getActiveSheet(); //給當前的活動sheet起個名稱 $objShee

HighCharts設定圖表背景透明

其實就一句話：  backgroundColor: 'rgba(0,0,0,0)' 完整示例： $(function () { $('#container').highcharts({ chart: { type: 'col

GCC 編譯使用動態連結庫和靜態連結庫--及先後順序----及環境變數設定總結

1 庫的分類 根據連結時期的不同，庫又有靜態庫和動態庫之分。 靜態庫是在連結階段被連結的（好像是廢話，但事實就是這樣），所以生成的可執行檔案就不受庫的影響了，即使庫被刪除了，程式依然可以成功執行。 有別於靜態庫，動態庫的連結是在程式執行的時候被連結的。所以，即使

ubuntu fstab設定總結

可能玩Linux的朋友都知道fstab這個檔案，如果要用好linux，熟悉linux的一些核心配置檔案是必要的，而fstab則是其中之一。這個檔案描述系統中各種檔案系統的資訊，應用程式讀取這個檔案，然後根據其內容進行自動掛載的工作。因此，我們需要理解其中的內容，瞭解它如何與

Android 背景透明度設定總結

一、寫在前面的 在需求上遇到背景設定透明度還是比較常見的，設定透明度有幾種方式，但是不同的場景應用下，不同的方式可能會出現一些問題。針對開發過程中的需求做以下總結。 二、先看效果圖 圖1、   圖2、 圖3、  圖4 介紹：圖1、藍色頭部和輸入框背景初始狀態    圖2

Android 彈出軟鍵盤android:windowSoftInputMode設定總結

當在Android的layout設計裡面如果輸入框過多，則在輸入彈出軟鍵盤的時候，下面的輸入框會有一部分被軟體盤擋住，從而不能獲取焦點輸入。或者是有使用framentlayout懸浮在底部的button也會擋住輸入框。 一、解決辦法 方法一： 在你的activity

C語言結構體對齊與不對齊設定總結

相信不同的編譯平臺間的預設設定差異給大家帶來了很多困擾。在此，僅就結構體對齊解析下之間的差異設定方法。 1.gcc中結構體預設是4個位元組對齊，即為32的倍數。 1.1修改位元組對齊： struct data{ int a; char b; char c; }__