jQuery插件HighCharts實現的2D回歸直線散點效果示例【附demo源碼下載】
更新時間:2017年03月09日 09:51:39 作者:翱翔天地
這篇文章主要介紹了jQuery插件HighCharts實現的2D回歸直線散點效果,結合實例形式分析了jQuery基于HighCharts插件繪制直線散點圖形的具體相關操作步驟與實現技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了jQuery插件HighCharts實現的2D回歸直線散點效果。分享給大家供大家參考,具體如下:
1、實例代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts之2D回歸直線的散點</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript"> $(function(){ $('#scatterLine').highcharts({ chart: { }, xAxis: { //設置X軸最小值和最大值 min: -0.5, max: 5.5 }, yAxis: { //設置Y軸最小值和最大值 min: 0, max: 5 }, title: { text: '(jb51.net)回歸直線的散點' }, series: [{ type: 'line', name: '回歸直線', data: [[0, 1.11], [5, 4.51]], marker: { enabled: true }, states: { hover: { lineWidth: 4 //設置折線的寬度 } }, enableMouseTracking: true }, { type: 'scatter', name: '散點', data: [2.2, 1.5, 3.8, 1.5, 3.9, 4.2,5.6], marker: { radius: 10 //散點的半徑 } }] }); }); </script> </head> <body> <div id="scatterLine" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、運行效果圖:
附:完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
- jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
- jQuery插件HighCharts實現氣泡圖效果示例【附demo源碼】
- jQuery插件HighCharts繪制2D帶有Legend的餅圖效果示例【附demo源碼下載】
- jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
- jQuery插件HighCharts繪制2D半圓環(huán)圖效果示例【附demo源碼下載】
- jQuery插件HighCharts繪制2D金字塔圖效果示例【附demo源碼下載】
- jQuery插件HighCharts繪制2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo源碼下載】
- jQuery插件HighCharts繪制的基本折線圖效果示例【附demo源碼下載】
- jQuery animate()實現背景色漸變效果的處理方法【使用jQuery.color.js插件】
- 12款經典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 強烈推薦240多個jQuery插件提供下載
- jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
相關文章
html+jQuery實現拖動滑塊圖片拼圖驗證碼插件【移動端適用】
這篇文章主要介紹了html+jQuery實現拖動滑塊圖片拼圖驗證碼插件,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09