jquery highcharts組件--餅型圖標實例

時間 2019-11-09

標籤 jquery highcharts 組件餅型圖實例欄目 JQuery 简体版

原文原文鏈接

<html> <head> <title>highcharts報表示例</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="./jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { /** * highcharts數據圖表 * * @param {object} chart 圖表的相關參數配置 * @param {object} credits 圖表版權信息參數配置 * @param {object} lang 圖表語言參數配置 * @param {object} exporting 導出配置 * @param {object} title 標題配置 * @param {object} xAxis X軸配置 * @param {object} yAxis Y軸配置 * @param {object} plotOptions 各種型圖表繪製配置 * @param {object} labels 數據圖表標籤配置 * @param {array} series 數據源配置 */ chart = new Highcharts.Chart({ /** * 圖表配置 * * @param {string} renderTo 圖表加載的位置 * @param {int} width 圖表的寬度 * @param {int} hight 圖表的高度 * @param {string} type 圖表的默認類型 * @param {string} zoomType 圖表的縮放選項，有：x, y, xy */ chart: { // 圖表加載的位置 renderTo: 'container', // 圖表寬度 width: 600, // 圖表高度 hight: 500, // 默認圖表類型 type: 'pie', // 縮放配置：x，y，xy zoomType: '' }, /** * 版權信息配置，不用修改直接複製 * * @param {boolean} enabled 是否顯示版權信息 * @param {string} href 版權信息所連接到的地址 * @param {string} text 版權信息所顯示的文字內容 */ credits:{ enabled: false, href: "http://www.msnui.tk/Admin", text: '微源網絡科技' }, /** * 語言配置，不用修改直接複製 * * @param {string} exportButtonTitle 導出按鈕的標題文字 * @param {string} printButtonTitle 打印按鈕的標題文字 */ lang:{ exportButtonTitle:'導出PDF', printButtonTitle:'打印報表' }, /** * 導出配置，不用修改直接複製 * * @param {boolean} enabled 是否容許導出 * @param {object} buttons 關於與導出和打印按鈕相關的配置對象 * @param {string} filename 導出文件的文件名 * @param {string} type 默認導出文件的格式 */ exporting:{ // 是否容許導出 enabled:true, // 按鈕配置 buttons:{ // 導出按鈕配置 exportButton:{ menuItems: null, onclick: function() { this.exportChart(); } }, // 打印按鈕配置 printButton:{ enabled:false } }, // 文件名 filename: '報表', // 導出文件默認類型 type:'application/pdf' }, /** * 圖表的標題 * * @param {string} text 圖表的標題，若是不須要顯示標題，直接設置爲空字符串就行 */ title: { text: '餅型圖表實例' }, /** * 繪圖的各選項、參數配置 * @param {object} series 數列，能夠配置各類不一樣類型圖表的默認參數 * @param {object} bar 橫向柱狀圖配置參數 * @param {object} column 縱向柱狀圖配置參數 * @param {object} line 線性圖 * @param {object} spline 圓滑曲線圖配置參數 * @param {object} pie 餅狀圖 */ plotOptions:{ /** * 數列，對於全部的圖表均可以適用的配置參數，屬於共用性質。 */ series: { // 鼠標樣式 cursor: 'pointer', events:{ // 數據標註不可點擊 legendItemClick: true }, // 當是柱狀圖時，柱狀的寬度 pointWidth: 15 }, /** * 餅狀圖 */ pie:{ // 是否容許扇區點擊 allowPointSelect: true, // 點擊後，滑開的距離 slicedOffset: 5, // 餅圖的中心座標 center: [300, 150], // 餅圖的大小 size: 300, // 數據標籤 dataLabels: { // 是否容許標籤(圖形外面指向有字true沒字false) enabled: true, // 標籤與圖像元素之間的間距 distance: 10 }, // 數據點的點擊事件 events:{ click: function(event){ //alert('The bar was clicked, and you can add any other functions.'); } }, // 是否忽略隱藏的項 ignoreHiddenPoint: true, // 當具體的數據點被點擊時的事件響應函數。若是不須要事件響應，能夠刪除。 point:{ events:{ click: function(){ //alert('This point on the line was clicked. You can and any other functions.'); } } }, // 是否在圖注中顯示。(是否有下面的標籤) showInLegend: true, // 調整圖像順序關係 zIndex: 0 } }, /** * 數據源配置，自己是一個對象數組 * * @param {string} type 圖表的類型 * @param {string} name 數據序列的名稱 * @param {array} data 數據序列，是一個對象數組 */ series: [{ type: 'pie', name: '水果總消耗量', data: [{ name: 'Jane', y: 13, color: '#4572A7' // Jane's color }, { name: 'John', y: 23, color: '#AA4643' // John's color }, { name: 'Joe', y: 19, color: '#89A54E' // Joe's color }] }] }); }); }); </script> </head> <body> <script src="./highcharts.js"></script> <script src="./exporting.js"></script> <div id="container"></div> </body> </html>

相關標籤/搜索

每日一句

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