HighCharts入門

時間 2019-11-08

標籤 highcharts 入門简体版

原文原文鏈接

1、什麼是HighChartsjavascript

一、HighCharts是網頁報表工具，開發語言是Javascriptcss

二、HighCharts是一個簡單易用、美觀、跨平臺、跨瀏覽器的圖表工具html

三、HighCharts支持圖表的類型有：曲線圖、柱狀圖、餅狀圖、區域圖、散點圖、綜合圖的各類圖表需求。java

直線圖——linejquery

折線圖——splineajax

柱狀圖——columnapi

餅狀圖——pie瀏覽器

區域圖——area框架

綜合圖——more工具

1、你必須知道的

一、首先，HighCharts是基於Jquery框架開發的，因此須要在頁面引入Jquery，具體代碼是：

二、其次，須要引入HighCharts js文件

引入HighCharts js文件還能夠是拷貝下載下來的Highcharts資源包中的js目錄下的highcharts.js文件

三、若是你想使用導出功能，必須引入導出相關的js文件，該文件存在與/Highcharts-2.3.5/js/modules/目錄下

引入下面的三個資源文件後，你就能夠參考API文檔進行開發了

HighCharts 圖表屬性——chart

HighCharts 顏色屬性——colors

HighCharts 版權屬性——credits

HighCharts 導出屬性——explorting

HighCharts HTML標籤——labels

HighCharts 語言屬性——lang

HighCharts 圖例屬性——legengd

HighCharts 加載屬性——loading

HighCharts 導出按鈕屬性——navigation

HighCharts 數據點屬性——plotOptions

HighCharts 數據列屬性——series

HighCharts 標題和副標題——title subtitle

HighCharts 數據點提示框——tooltip

HighCharts X軸和Y軸——xAxis yAxis

<html>  
    <head>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
        <script type="text/javascript" src="../jquery-1.4.4.js"></script>  
        <script type="text/javascript">  
            $(function () {  
            var chart;   
            $(document).ready(function() {  
                chart = new Highcharts.Chart({  
                //HighCharts中chart屬性配置  
                  chart: {  
                    renderTo: 'container',//div 標籤  
                    type: 'line',//圖表類型  
                      
                    /******************如下chart配置可選******************/  
                    backgroundColor:"#EAF7FF",//圖表背景色  
                    borderWidth:5,//圖表邊框寬度  
                    borderRadius:15,//圖表邊框圓角角度  
                    plotBackgroundColor:"#6DBFBB",//主圖表區背景顏色  
                    plotBorderColor:'red',//主圖表邊框顏色  
                    plotBorderWidth:2,//主圖表邊框寬度  
                    shadow:true,//是否設置陰影  
                    zoomType:'xy'//拖動鼠標放大圖表的方向  
                  },  
                   credits : {  
                        //enable:true,默認就爲true，能夠不配置  
                        //若是想要去除版權（也就是不顯示），只須要設置enable:false便可  
                        href:'http://www.52wulian.org',//連接地址  
                        position: {                        //文字的位置  
                            x:-30,  
                            y:-30  
                        },  
                        style:{                            //文字的樣式  
                            color:'red',  
                            fontWeight:'bold'  
                        },  
                        enabled:true,//不顯示highCharts版權信息,不顯示爲false  
                        text:'我愛物聯網'                //文字  
                  },  
                  /******************  
                  **Colors-顏色屬性爲可選配置  
                  **經過配置配置colors，能夠輕鬆的設置數據列的顏色  
                  一、顏色代碼能夠是十六進制，也能夠是英文單詞，  
                    還能夠是RGB，如同css  
                    二、默認是從第一個數據列起調用第一個顏色代碼，  
                    有多少個數據列調用相應數量的顏色  
                    三、當數據列大於默認顏色數量時，重複從第一個  
                    顏色看是調用  
                  ******************/  
                  colors:[  
                    '#000000',//黑  
                    '#FF0000',//紅  
                    '#00FF00',//綠  
                    '#0000FF',//藍  
                    '#FFFF00',//黃  
                    '#FF00FF',//紫  
                    '#FFFFFF',//紫  
                  ],  
                  exporting: {  
                    //enabled:true,默認爲可用，當設置爲false時，圖表的打印及導出功能失效  
                    buttons:{    //配置按鈕選項  
                        printButton:{    //配置打印按鈕  
                            width:50,  
                            symbolSize:20,  
                            borderWidth:2,  
                            borderRadius:0,  
                            hoverBorderColor:'red',  
                            height:30,  
                            symbolX:25,  
                            symbolY:15,  
                            x:-200,  
                            y:20  
                        },  
                        exportButton:{    //配置導出按鈕  
                            width:50,  
                            symbolSize:20,  
                            borderWidth:2,  
                            borderRadius:0,  
                            hoverBorderColor:'red',  
                            height:30,  
                            symbolX:25,  
                            symbolY:15,  
                            x:-150,  
                            y:20  
                        }  
                    },  
                    filename:'52wulian.org',//導出的文件名  
                    type:'image/png',//導出的文件類型  
                    width:800    //導出的文件寬度  
                  },  
                  labels:{  
                      items:[{  
                        //標籤代碼（html代碼）  
                        html:'<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我愛物聯網</a>',  
                        style:{ //設置標籤位置  
                                left:'100px',  
                                top:'50px'  
                        }  
                    }],  
                      style:{    //設置標籤顏色  
                          color:'rgb(0,0,255)'  
                      }  
                  },  
                  xAxis: {  
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']  
                    },       
                  series: [{  
                        name: 'Tokyo',  
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  
                    }, {  
                        name: 'New York',  
                        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]  
                    }, {  
                        name: 'Berlin',  
                        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]  
                    }, {  
                        name: 'London',  
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]  
                    }]  
                });  
            });  
        });  
        </script>  
    </head>  
    <body>  
        <script src="../highcharts.js"></script>  
        <script src="../exporting.js"></script>  
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
    </body>  
</html>

相關標籤/搜索

每日一句

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