純JavaScrip圖表插件——Highcharts

時間 2019-11-08

標籤 javascrip 圖表插件 highcharts 欄目 JavaScript 简体版

原文原文鏈接

簡介　javascript

　　Highcharts 是一個用純JavaScript編寫的一個圖表庫, 可以很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。目前HighCharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表html

demojava

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="@my_coder">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
<!--
    $(function () {
    $('#container').highcharts({
        //圖表區選項
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        //標題選項
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        //數據點提示框
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        //數據點選項
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        //數據列選項
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
    

//-->
</script>

</body>
</html>

highcharts選項配置說明（摘自：http://www.helloweba.com/view-blog-156.html）jquery

　　Highcharts提供大量的選項配置參數，您能夠輕鬆定製符合用戶要求的圖表，目前官網只提供英文版的開發配置說明文檔，而中文版的文檔網上甚少，且零散不全。這裏，我把Highcharts經常使用的最核心的參數選項配置整理成文檔，與你們分享。web

Chart：圖表區選項

Chart圖表區選項用於設置圖表區相關屬性。api

參數	描述	默認值
backgroundColor	設置圖表區背景色	#FFFFFF
borderWidth	設置圖表邊框寬度	0
borderRadius	設置圖表邊框圓角角度	5
renderTo	圖表放置的容器，通常在html中放置一個DIV，獲取DIV的id屬性值	null
defaultSeriesType	默認圖表類型line, spline, area, areaspline, column, bar, pie , scatter	0
width	圖表寬度，默認根據圖表容器自適應寬度	null
height	圖表高度，默認根據圖表容器自適應高度	null
margin	設置圖表與其餘元素之間的間距，數組，如[0,0,0,0]	[null]
plotBackgroundColor	主圖表區背景色，即X軸與Y軸圍成的區域的背景色	null
plotBorderColor	主圖表區邊框的顏色，即X軸與Y軸圍成的區域的邊框顏色	null
plotBorderWidth	主圖表區邊框的寬度	0
shadow	是否設置陰影，須要設置背景色backgroundColor。	false
reflow	是否自使用圖表區域高度和寬度，若是沒有設置width和height時，會自適應大小。	true
zoomType	拖動鼠標進行縮放，沿x軸或y軸進行縮放，能夠設置爲：'x','y','xy'	''
events	事件回調，支持addSeries方法，click方法，load方法，selection方法等的回調函數。

Color：顏色選項

Color顏色選項用於設置圖表的顏色方案。數組

參數	描述	默認值
color	用於展現圖表，折線/柱狀/餅狀等圖的顏色，數組形式。	array

Highcharts已經默認提供了多種顏色方案，當要顯示的圖形多於顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法：ide

 
Highcharts.setOptions({ 
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', 
'#FFF263', '#6AF9C4'] 
});

Title：標題選項

Title標題選項用於設置圖表的標題相關屬性。函數

參數	描述	默認值
text	標題文本內容。	Chart title
align	水平對齊方式。	center
verticalAlign	垂直對齊方式。	top
margin	標題與副標題之間或者主圖表區間的間距。	15
floating	是否浮動，若是爲true，則標題能夠偏離主圖表區，可配合x,y屬性使用。	false
style	設置CSS樣式。	{color: '#3E576F', fontSize: '16px'}

Subtitle：副標題選項

副標題提供的屬性選項與標題title大體相同，可參照上述標題選項，值得一提的是副標題的text選項默認爲''，即空的，因此默認狀況下副標題不顯示。學習

xAxis：X軸選項

X軸選項用於設置圖表X軸相關屬性。

參數	描述	默認值
categories	設置X軸分類名稱，數組，例如：categories: ['Apples', 'Bananas', 'Oranges']	[]
title	X軸名稱，支持text、enabled、align、rotation、style等屬性
labels	設置X軸各分類名稱的樣式style，格式formatter，角度rotation等。	array
max	X軸最大值(categories爲空時)，若是爲null，則最大值會根據X軸數據自動匹配一個最大值。	null
min	X軸最小值(categories爲空時)，若是爲null，則最小值會根據X軸數據自動匹配一個最小值。	array
gridLineColor	網格（豎線）顏色	#C0C0C0
gridLineWidth	網格(豎線)寬度	1
lineColor	基線顏色	#C0D0E0
lineWidth	基線寬度	0

yAxis：Y軸選項

Y軸選項與上述xAxis選項基本一致，請參照上表中的參數設置，再也不單獨列出。

Series：數據列選項

數據列選項用於設置圖表中要展現的數據相關的屬性。

參數	描述	默認值
data	顯示在圖表中的數據列，能夠爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	''
name	顯示數據列的名稱。	''
type	數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline	line

plotOptions：數據點選項

plotOptions用於設置圖表中的數據點相關屬性。plotOptions根據各類圖表類型，其屬性設置略微有些差別，現將經常使用選項列出來。

參數	描述	默認值
enabled	是否在數據點上直接顯示數據	false
allowPointSelect	是否容許使用鼠標選中數據點	false
formatter	回調函數，格式化數據顯示內容	formatter: function() {return this.y;}

Tooltip：數據點提示框

Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息。

參數	描述	默認值
enabled	是否顯示提示框	true
backgroundColor	設置提示框的背景色	rgba(255, 255, 255, .85)
borderColor	提示框邊框顏色，默認自動匹配數據列的顏色	auto
borderRadius	提示框圓角度	5
shadow	是否顯示提示框陰影	true
style	設置提示框內容樣式，如字體顏色等	color:'#333'
formatter	回調函數，用於格式化輸出提示框的顯示內容。返回的內容支持html標籤如：<b>, <strong>, <i>, <em>, <br/>, <span>	2

Legend：圖例選項

legend用於設置圖例相關屬性。

參數	描述	默認值
layout	顯示形式，支持水平horizontal和垂直vertical	horizontal
align	對齊方式。	center
backgroundColor	圖例背景色。	null
borderColor	圖例邊框顏色。	#909090
borderRadius	圖例邊框角度	5
enabled	是否顯示圖例	true
floating	是否能夠浮動，配合x，y屬性。	false
shadow	是否顯示陰影	false
style	設置圖例內容樣式	''

HIGHCHARTS圖表史上最全的參數配置(屬性+事件)

(摘自：http://www.cnblogs.com/LiviaLiu742X/archive/2013/07/22/3205450.html)

chart.events.addSeries：添加數列到圖表中。

chart.events.click：整個圖表的繪圖區上所發生的點擊事件。

chart.events.load：圖表加載事件。

chart.events.redraw：圖表重畫事件，當點擊圖注顯示和隱藏繪圖時能夠觸發。

chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操做時，能夠觸發該事件。

chart.height：所繪製圖表的高度值。

chart.inverted：圖表中的x，y軸對換。

chart.polar：是否爲極性圖表。

chart.reflow：當窗口大小改變時，圖表寬度自適應窗口大小改變。

chart.renderTo：圖表加載的位置，是頁面上的一個DOM對象。

chart.showAxes：在空白圖表中，是否顯示座標軸。

chart.type：圖表的類型，默認爲line，還有bar/column/pie……

chart.width：圖表繪圖區的寬度，默認爲自適應。

chart.zoomType：圖表中數據報表的放大類型，能夠以X軸放大，或是以Y軸放大，還能夠以XY軸同時放大。

colors：圖表中多數列時，各數列之間的顏色。是一個數組，通常不動。

credits.enabled：是否容許顯示版權信息。

credits.href：版權全部的連接。

credits.text：版權信息顯示文字。

exporting.buttons.exportButton.enabled：是否容許顯示導出按鈕。

exporting.buttons.exportButton.menuItems：導出按鈕的菜單選項。

exporting.buttons.exportButton.onclick：導出按鈕被點擊的事件，不是內部的菜單。

exporting.buttons.printButton.enabled：是否容許打印按鈕。

exporting.buttons.printButton.onclick：打印按鈕的點擊事件。

exporting.enabled：打印和導出按鈕是否被容許。

exporting.filename：被導出文件的文件名。

exporting.type：默認導出圖片的文件格式。

exporting.url：SVG圖表轉換並導出的接口處理地址。

exporing.width：默認導出圖片的寬度。

labels：標籤，能夠加載到圖表的任何位置，裏面有items，style。

lang：語言參數配置，與導出按鈕菜單有關的配置，時間名稱的配置等。

legend.enabled：是否容許圖注。

navigation.buttonOptions.enabled：圖表中全部導航中的按鈕是否可被點擊。

plotOptions.area.allowPointSelect：是否容許數據點的點擊。

plotOptions.area.color：繪圖的顏色。

plotOptions.area.dataLabels.enabled：是否容許數據標籤。

plotOptions.area.enableMouseTracking：是否容許數據圖表中，數據點的鼠標跟蹤氣泡顯示。

plotOptions.area.events.checkboxClick：數據圖表中圖注中複選框的點擊事件。

plotOptions.area.events.click：數據圖表中，數據點的點擊事件。

plotOptions.area.events.hide：數據圖表中，某一數據序列隱藏時的事件。

plotOptions.area.events.show：數據圖表中，某一數據序列顯示時的事件。

plotOptions.area.events.legendItemClick：數據圖表中，圖注中的項目被點擊時的事件，直接賦值false，則不可點擊。

plotOptions.area.events.mouseOut：數據點的鼠標移出事件。

plotOptions.area.events.mouseOver：數據點的鼠標通過事件。

plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。

plotOptions.area.marker.states.hover.enabled：是否容許標記符的鼠標通過狀態。

plotOptions.area.marker.states.select.enabled：是否容許標記符的選擇狀態。

plotOptions.area.point.events.click：圖表中每個單獨的點點擊事件。

plotOptions.area.point.events.mouseOut

plotOptions.area.point.events..mouseOver

plotOptions.area.point.events.remove：刪除圖表中的點時的事件。

plotOptions.area.point.events.select：圖表中點選擇事件。

plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。

plotOptions.area.point.events.update：圖表中數據發生更新時的事件。

plotOptions.area.visible：加載時，數據序列默認是顯示仍是隱藏。

plotOptions.area.zIndex：在多序列的狀況下，調整每個序列的層疊順序。

以上的point.events一樣還適用於其餘面積類圖表（arearange、areaspline、areasplinerange），其餘的柱狀圖（bar、column）及全部圖表。

plotOptions.area.showInLegend：是否在圖注中顯示。

plotOptions.area.stacking：是以值堆疊，仍是以百分比堆疊。

plotOptions.area.states.hover.enabled：鼠標放上的狀態是否容許。

plotOptions.area.stickyTracking：鼠標粘性跟蹤數據點。

plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類同於plotOptions.area

plotOptions.bar.groupPadding：對於柱狀圖分組，每一個分組之間的間隔。

plotOptions.bar.grouping：是否對數據進行分組。

plotOptions.bar.minPointLength:：定義當point值爲零時，點的最小長度爲多少

plotOptions.bar.showInLegend：是否在圖注中顯示。

plotOptions.bar.stacking：是以值堆疊，仍是以百分比堆疊（normal/percent）。

plotOptions.column，plotOptions.columnrange類同於plotOptions.bar

plotOptions.line的相關配置相似於plotOptions.area配置。

plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經圖注點擊隱藏後，整個餅狀圖是從新以100%分配，仍是隻在原圖基礎上隱藏，呈現一個缺口。

plotOptions.pie.innerSize：繪製餅狀圖時，餅狀圖的圓心預留多大的空白。

plotOptions.pie.slicedOffset：與allowPointSelect結合使用，當點被點擊時，對應的扇區剝離，這個參數即配置離開的距離。

plotOptions.pie的其餘經常使用配置參數類同於plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關配置相似於plotOptions.area配置。

series：是一個數組。

series.data.color：某一個數據的顏色。

series.data.dataLabels：序列中某一個數據的數據標籤。

series.data.events類同於plotOptions.area.point.events的相關配置。

series.data.marker類同於plotOptions.area.marker的相關配置。

series.data.name：配置數據點的名稱。

series.data.sliced：配置在餅圖中，扇區的分離距離大小。

series.data.x：點的x值。

series.data.y：點的y值。

series.name：數據序列的名稱。

series.stack：堆疊的分組索引。

series.type：數據序列的展現類型。

series.xAxis，series.yAxis：當使用多座標軸時，指定某個數列對應哪一個座標軸。

subtitle：配置圖表的子標題。

title：配置圖表的標題。

tooltip：配置圖表中數據的氣泡提示。

tooltip.valueDecimals：容許的小數點位數。

tooltip.percentageDecimals：容許百分比的小數點後位數。

xAxis，yAxis配置設置座標軸

allowDecimals：座標軸上是否容許小數。

categories：是一個數組，座標軸的分類。

plotLines：繪製主線。

tickColor：刻度顏色。

tickInterval：刻度的步進值。

labels.rotation：刻度標籤旋轉度數

參考：

highcharts官網：http://www.highcharts.com/

highcharts官網demo：http://www.highcharts.com/demo/pie-basic

highcharts官網文檔：http://api.highcharts.com/highcharts

幾篇不錯的博客：

　　highcharts使用指南：http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html

　　Highcharts選項配置詳細說明文檔：http://www.helloweba.com/view-blog-156.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。