Highcharts 散点图介绍
生活随笔
收集整理的這篇文章主要介紹了
Highcharts 散点图介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本章節我們將為大家介紹 Highcharts 的散點圖。
配置
chart 配置
配置 chart 的 type 為 'scatter' 。chart.type 描述了圖表類型。默認值為 "line"。
chart.zoomType 屬性可配置圖表放大 ，通過拖動鼠標進行縮放，沿x軸或y軸進行縮放，可以設置為：'x','y','xy'。
var?chart?=?{type:?'scatter',zoomType:?'xy' };實例
文件名：highcharts_scatter_basic.htm
<html><head><meta?charset="UTF-8"?/><title>Highcharts?教程?|?菜鳥教程(runoob.com)</title><script?src="(document).ready(function()?{??var?chart?=?{type:?'scatter',??????zoomType:?'xy'};var?title?=?{text:?'Height?Versus?Weight?of?507?Individuals?by?Gender'???};var?subtitle?=?{text:?'Source:?Heinz??2003'??};var?xAxis?=?{title:?{enabled:?true,text:?'Height?(cm)'},startOnTick:?true,endOnTick:?true,showLastLabel:?true};var?yAxis?=?{title:?{text:?'Weight?(kg)'}};var?legend?=?{???layout:?'vertical',align:?'left',verticalAlign:?'top',x:?100,y:?70,floating:?true,backgroundColor:?(Highcharts.theme?&&?Highcharts.theme.legendBackgroundColor)?||?'#FFFFFF',borderWidth:?1}??var?plotOptions?=?{scatter:?{marker:?{radius:?5,states:?{hover:?{enabled:?true,lineColor:?'rgb(100,100,100)'}}},states:?{hover:?{marker:?{enabled:?false}}},tooltip:?{headerFormat:?'<b>{series.name}</b><br>',pointFormat:?'{point.x}?cm,?{point.y}?kg'}}};var?series=?[{name:?'Female',color:?'rgba(223,?83,?83,?.5)',data:?[[161.2,?51.6],?[167.5,?59.0],?[159.5,?49.2],?[157.0,?63.0],?[155.8,?53.6],[170.0,?59.0],?[159.1,?47.6],?[166.0,?69.8],?[176.2,?66.8],?[160.2,?75.2],[172.5,?55.2],?[170.9,?54.2],?[172.9,?62.5],?[153.4,?42.0],?[160.0,?50.0],[147.2,?49.8],?[168.2,?49.2],?[175.0,?73.2],?[157.0,?47.8],?[167.6,?68.8],[159.5,?50.6],?[175.0,?82.5],?[166.8,?57.2],?[176.5,?87.8],?[170.2,?72.8],[174.0,?54.5],?[173.0,?59.8],?[179.9,?67.3],?[170.5,?67.8],?[160.0,?47.0],[154.4,?46.2],?[162.0,?55.0],?[176.5,?83.0],?[160.0,?54.4],?[152.0,?45.8],[162.1,?53.6],?[170.0,?73.2],?[160.2,?52.1],?[161.3,?67.9],?[166.4,?56.6],[168.9,?62.3],?[163.8,?58.5],?[167.6,?54.5],?[160.0,?50.2],?[161.3,?60.3],[167.6,?58.3],?[165.1,?56.2],?[160.0,?50.2],?[170.0,?72.9],?[157.5,?59.8],[167.6,?61.0],?[160.7,?69.1],?[163.2,?55.9],?[152.4,?46.5],?[157.5,?54.3],[168.3,?54.8],?[180.3,?60.7],?[165.5,?60.0],?[165.0,?62.0],?[164.5,?60.3],[156.0,?52.7],?[160.0,?74.3],?[163.0,?62.0],?[165.7,?73.1],?[161.0,?80.0],[162.0,?54.7],?[166.0,?53.2],?[174.0,?75.7],?[172.7,?61.1],?[167.6,?55.7],[151.1,?48.7],?[164.5,?52.3],?[163.5,?50.0],?[152.0,?59.3],?[169.0,?62.5],[164.0,?55.7],?[161.2,?54.8],?[155.0,?45.9],?[170.0,?70.6],?[176.2,?67.2],[170.0,?69.4],?[162.5,?58.2],?[170.3,?64.8],?[164.1,?71.6],?[169.5,?52.8],[163.2,?59.8],?[154.5,?49.0],?[159.8,?50.0],?[173.2,?69.2],?[170.0,?55.9],[161.4,?63.4],?[169.0,?58.2],?[166.2,?58.6],?[159.4,?45.7],?[162.5,?52.2],[159.0,?48.6],?[162.8,?57.8],?[159.0,?55.6],?[179.8,?66.8],?[162.9,?59.4],[161.0,?53.6],?[151.1,?73.2],?[168.2,?53.4],?[168.9,?69.0],?[173.2,?58.4],[171.8,?56.2],?[178.0,?70.6],?[164.3,?59.8],?[163.0,?72.0],?[168.5,?65.2],[166.8,?56.6],?[172.7,?105.2],?[163.5,?51.8],?[169.4,?63.4],?[167.8,?59.0],[159.5,?47.6],?[167.6,?63.0],?[161.2,?55.2],?[160.0,?45.0],?[163.2,?54.0],[162.2,?50.2],?[161.3,?60.2],?[149.5,?44.8],?[157.5,?58.8],?[163.2,?56.4],[172.7,?62.0],?[155.0,?49.2],?[156.5,?67.2],?[164.0,?53.8],?[160.9,?54.4],[162.8,?58.0],?[167.0,?59.8],?[160.0,?54.8],?[160.0,?43.2],?[168.9,?60.5],[158.2,?46.4],?[156.0,?64.4],?[160.0,?48.8],?[167.1,?62.2],?[158.0,?55.5],[167.6,?57.8],?[156.0,?54.6],?[162.1,?59.2],?[173.4,?52.7],?[159.8,?53.2],[170.5,?64.5],?[159.2,?51.8],?[157.5,?56.0],?[161.3,?63.6],?[162.6,?63.2],[160.0,?59.5],?[168.9,?56.8],?[165.1,?64.1],?[162.6,?50.0],?[165.1,?72.3],[166.4,?55.0],?[160.0,?55.9],?[152.4,?60.4],?[170.2,?69.1],?[162.6,?84.5],[170.2,?55.9],?[158.8,?55.5],?[172.7,?69.5],?[167.6,?76.4],?[162.6,?61.4],[167.6,?65.9],?[156.2,?58.6],?[175.2,?66.8],?[172.1,?56.6],?[162.6,?58.6],[160.0,?55.9],?[165.1,?59.1],?[182.9,?81.8],?[166.4,?70.7],?[165.1,?56.8],[177.8,?60.0],?[165.1,?58.2],?[175.3,?72.7],?[154.9,?54.1],?[158.8,?49.1],[172.7,?75.9],?[168.9,?55.0],?[161.3,?57.3],?[167.6,?55.0],?[165.1,?65.5],[175.3,?65.5],?[157.5,?48.6],?[163.8,?58.6],?[167.6,?63.6],?[165.1,?55.2],[165.1,?62.7],?[168.9,?56.6],?[162.6,?53.9],?[164.5,?63.2],?[176.5,?73.6],[168.9,?62.0],?[175.3,?63.6],?[159.4,?53.2],?[160.0,?53.4],?[170.2,?55.0],[162.6,?70.5],?[167.6,?54.5],?[162.6,?54.5],?[160.7,?55.9],?[160.0,?59.0],[157.5,?63.6],?[162.6,?54.5],?[152.4,?47.3],?[170.2,?67.7],?[165.1,?80.9],[172.7,?70.5],?[165.1,?60.9],?[170.2,?63.6],?[170.2,?54.5],?[170.2,?59.1],[161.3,?70.5],?[167.6,?52.7],?[167.6,?62.7],?[165.1,?86.3],?[162.6,?66.4],[152.4,?67.3],?[168.9,?63.0],?[170.2,?73.6],?[175.2,?62.3],?[175.2,?57.7],[160.0,?55.4],?[165.1,?104.1],?[174.0,?55.5],?[170.2,?77.3],?[160.0,?80.5],[167.6,?64.5],?[167.6,?72.3],?[167.6,?61.4],?[154.9,?58.2],?[162.6,?81.8],[175.3,?63.6],?[171.4,?53.4],?[157.5,?54.5],?[165.1,?53.6],?[160.0,?60.0],[174.0,?73.6],?[162.6,?61.4],?[174.0,?55.5],?[162.6,?63.6],?[161.3,?60.9],[156.2,?60.0],?[149.9,?46.8],?[169.5,?57.3],?[160.0,?64.1],?[175.3,?63.6],[169.5,?67.3],?[160.0,?75.5],?[172.7,?68.2],?[162.6,?61.4],?[157.5,?76.8],[176.5,?71.8],?[164.4,?55.5],?[160.7,?48.6],?[174.0,?66.4],?[163.8,?67.3]]},?{name:?'Male',color:?'rgba(119,?152,?191,?.5)',data:?[[174.0,?65.6],?[175.3,?71.8],?[193.5,?80.7],?[186.5,?72.6],?[187.2,?78.8],[181.5,?74.8],?[184.0,?86.4],?[184.5,?78.4],?[175.0,?62.0],?[184.0,?81.6],[180.0,?76.6],?[177.8,?83.6],?[192.0,?90.0],?[176.0,?74.6],?[174.0,?71.0],[184.0,?79.6],?[192.7,?93.8],?[171.5,?70.0],?[173.0,?72.4],?[176.0,?85.9],[176.0,?78.8],?[180.5,?77.8],?[172.7,?66.2],?[176.0,?86.4],?[173.5,?81.8],[178.0,?89.6],?[180.3,?82.8],?[180.3,?76.4],?[164.5,?63.2],?[173.0,?60.9],[183.5,?74.8],?[175.5,?70.0],?[188.0,?72.4],?[189.2,?84.1],?[172.8,?69.1],[170.0,?59.5],?[182.0,?67.2],?[170.0,?61.3],?[177.8,?68.6],?[184.2,?80.1],[186.7,?87.8],?[171.4,?84.7],?[172.7,?73.4],?[175.3,?72.1],?[180.3,?82.6],[182.9,?88.7],?[188.0,?84.1],?[177.2,?94.1],?[172.1,?74.9],?[167.0,?59.1],[169.5,?75.6],?[174.0,?86.2],?[172.7,?75.3],?[182.2,?87.1],?[164.1,?55.2],[163.0,?57.0],?[171.5,?61.4],?[184.2,?76.8],?[174.0,?86.8],?[174.0,?72.2],[177.0,?71.6],?[186.0,?84.8],?[167.0,?68.2],?[171.8,?66.1],?[182.0,?72.0],[167.0,?64.6],?[177.8,?74.8],?[164.5,?70.0],?[192.0,?101.6],?[175.5,?63.2],[171.2,?79.1],?[181.6,?78.9],?[167.4,?67.7],?[181.1,?66.0],?[177.0,?68.2],[174.5,?63.9],?[177.5,?72.0],?[170.5,?56.8],?[182.4,?74.5],?[197.1,?90.9],[180.1,?93.0],?[175.5,?80.9],?[180.6,?72.7],?[184.4,?68.0],?[175.5,?70.9],[180.6,?72.5],?[177.0,?72.5],?[177.1,?83.4],?[181.6,?75.5],?[176.5,?73.0],[175.0,?70.2],?[174.0,?73.4],?[165.1,?70.5],?[177.0,?68.9],?[192.0,?102.3],[176.5,?68.4],?[169.4,?65.9],?[182.1,?75.7],?[179.8,?84.5],?[175.3,?87.7],[184.9,?86.4],?[177.3,?73.2],?[167.4,?53.9],?[178.1,?72.0],?[168.9,?55.5],[157.2,?58.4],?[180.3,?83.2],?[170.2,?72.7],?[177.8,?64.1],?[172.7,?72.3],[165.1,?65.0],?[186.7,?86.4],?[165.1,?65.0],?[174.0,?88.6],?[175.3,?84.1],[185.4,?66.8],?[177.8,?75.5],?[180.3,?93.2],?[180.3,?82.7],?[177.8,?58.0],[177.8,?79.5],?[177.8,?78.6],?[177.8,?71.8],?[177.8,?116.4],?[163.8,?72.2],[188.0,?83.6],?[198.1,?85.5],?[175.3,?90.9],?[166.4,?85.9],?[190.5,?89.1],[166.4,?75.0],?[177.8,?77.7],?[179.7,?86.4],?[172.7,?90.9],?[190.5,?73.6],[185.4,?76.4],?[168.9,?69.1],?[167.6,?84.5],?[175.3,?64.5],?[170.2,?69.1],[190.5,?108.6],?[177.8,?86.4],?[190.5,?80.9],?[177.8,?87.7],?[184.2,?94.5],[176.5,?80.2],?[177.8,?72.0],?[180.3,?71.4],?[171.4,?72.7],?[172.7,?84.1],[172.7,?76.8],?[177.8,?63.6],?[177.8,?80.9],?[182.9,?80.9],?[170.2,?85.5],[167.6,?68.6],?[175.3,?67.7],?[165.1,?66.4],?[185.4,?102.3],?[181.6,?70.5],[172.7,?95.9],?[190.5,?84.1],?[179.1,?87.3],?[175.3,?71.8],?[170.2,?65.9],[193.0,?95.9],?[171.4,?91.4],?[177.8,?81.8],?[177.8,?96.8],?[167.6,?69.1],[167.6,?82.7],?[180.3,?75.5],?[182.9,?79.5],?[176.5,?73.6],?[186.7,?91.8],[188.0,?84.1],?[188.0,?85.9],?[177.8,?81.8],?[174.0,?82.5],?[177.8,?80.5],[171.4,?70.0],?[185.4,?81.8],?[185.4,?84.1],?[188.0,?90.5],?[188.0,?91.4],[182.9,?89.1],?[176.5,?85.0],?[175.3,?69.1],?[175.3,?73.6],?[188.0,?80.5],[188.0,?82.7],?[175.3,?86.4],?[170.5,?67.7],?[179.1,?92.7],?[177.8,?93.6],[175.3,?70.9],?[182.9,?75.0],?[170.8,?93.2],?[188.0,?93.2],?[180.3,?77.7],[177.8,?61.4],?[185.4,?94.1],?[168.9,?75.0],?[185.4,?83.6],?[180.3,?85.5],[174.0,?73.9],?[167.6,?66.8],?[182.9,?87.3],?[160.0,?72.3],?[180.3,?88.6],[167.6,?75.5],?[186.7,?101.4],?[175.3,?91.1],?[175.3,?67.3],?[175.9,?77.7],[175.3,?81.8],?[179.1,?75.5],?[181.6,?84.5],?[177.8,?76.6],?[182.9,?85.0],[177.8,?102.5],?[184.2,?77.3],?[179.1,?71.8],?[176.5,?87.9],?[188.0,?94.3],[174.0,?70.9],?[167.6,?64.5],?[170.2,?77.3],?[167.6,?72.3],?[188.0,?87.3],[174.0,?80.0],?[176.5,?82.3],?[180.3,?73.6],?[167.6,?74.1],?[188.0,?85.9],[180.3,?73.2],?[167.6,?76.3],?[183.0,?65.9],?[183.0,?90.9],?[179.1,?89.1],[170.2,?62.3],?[177.8,?82.7],?[179.1,?79.1],?[190.5,?98.2],?[177.8,?84.1],[180.3,?83.2],?[180.3,?83.2]]??????}];?????var?json?=?{};???json.chart?=?chart;?json.title?=?title;???json.subtitle?=?subtitle;?json.legend?=?legend;json.xAxis?=?xAxis;json.yAxis?=?yAxis;??json.series?=?series;json.plotOptions?=?plotOptions;$('#container').highcharts(json);});</script></body></html>總結
以上是生活随笔為你收集整理的Highcharts 散点图介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Linux中如何查看文件的修改日期
- 下一篇： CentOS 搭建内部Yum源同步阿里Y