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>