highcharts详细参数实例

来源：互联网发布：php 中get多个值编辑：程序博客网时间：2024/05/12 23:18
参数太多，建议ctrl+F，使用快速查找
 $(function () {                  var chart;                  $(document).ready(function() {                      chart = new Highcharts.Chart({                          chart: {                              // 图表加载的位置                              renderTo: 'container',                             // 图表宽度                              width: 600,                              // 图表高度                              hight: 500,                              // 默认图表类型                              type: 'line',                              // 缩放配置：x，y，xy                              zoomType: ''                          },                          credits:{                              enabled: false,                             href: "http://www.msnui.tk/Admin",                              text: '微源网络科技'                          },                          lang:{                              exportButtonTitle:'导出PDF',                              printButtonTitle:'打印报表'                          },                          exporting:{                              // 是否允许导出                              enabled:true,                              // 按钮配置                              buttons:{                                  // 导出按钮配置                                  exportButton:{                                      menuItems: null,                                      onclick: function() {                                          this.exportChart();                                      }                                  },                                  // 打印按钮配置                                  printButton:{                                      enabled:false                                  }                              },                              // 文件名                              filename: '报表',                              // 导出文件默认类型                              type:'application/pdf'                          },                                            title: {                              text: '联合图表实例'                          },                          xAxis: {                              // X轴分类                              categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],                              // 坐标轴的标签                              labels:{                                  // 标签位置                                  align: 'center',                                  // 标签格式化                                  formatter: function(){                                      return this.value;                                  },                                  // 标签旋转度数                                  rotation: 20,                                  // 标签交错显示的行数                                  staggerLines: 1                              },                              // X轴的步进值，决定隔多少个显示一个                              tickInterval: 1,                              // 坐标轴标题                              title: {                                  text: '水果分类'                              }                          },                         yAxis: {                              // 坐标轴的标签                              labels:{                                  // 标签位置                                  align: 'right',                                  // 标签格式化                                  formatter: function(){                                      return this.value + '个';                                  }                              },                              // y轴的步进值，决定隔多少个显示一个                              tickInterval: 3,                              // 坐标轴标题                              title: {                                  text: '水果个数'                              }                          },                          plotOptions:{                              series: {                                  // 鼠标样式                                  cursor: 'pointer',                                  events:{                                      // 数据标注不可点击                                      legendItemClick: false                                  },                                  // 当是柱状图时，柱状的宽度                                  pointWidth: 15                              },                              bar:{                                  // 数据点的点击事件                                  events:{                                      click: function(event){                                          //alert('The bar was clicked, and you can add any other functions.');                                      }                                  },                                  // 当值为0时，在图表中柱状体的长度设置                                  minPointLength: 2,                                  // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。                                  point:{                                      events:{                                          click: function(){                                              //alert('This point was clicked. You can and any other functions.');                                          }                                      }                                  },                                  // 是否在图注中显示。                                  showInLegend: true,                                  // 是否堆叠，默认：null，数值：normal，百分比：percent                                  //stacking: 'normal',                                  // 调整图像顺序关系                                  zIndex: 1                              },                              column:{                                  // 数据点的点击事件                                  events:{                                      click: function(event){                                          //alert('The bar was clicked, and you can add any other functions.');                                      }                                  },                                  // 当值为0时，在图表中柱状体的长度设置                                  minPointLength: 2,                                  // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。                                  point:{                                      events:{                                          click: function(){                                              //alert('This point was clicked. You can and any other functions.');                                          }                                      }                                  },                                  // 是否在图注中显示。                                  showInLegend: true,                                  // 是否堆叠，默认：null，数值：normal，百分比：percent                                  //stacking: null,                                  // 调整图像顺序关系                                  zIndex: 2                              },                              line:{                                  // 允许线性图上的数据点进行点击                                  allowPointSelect: true,                                  // 数据点的点击事件                                  events:{                                      click: function(event){                                          //alert('The bar was clicked, and you can add any other functions.');                                      }                                  },                                  // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。                                  point:{                                      events:{                                          click: function(){                                              //alert('This point on the line was clicked. You can and any other functions.');                                          }                                      }                                  },                                  // 是否在图注中显示。                                  showInLegend: true,                                  // 调整图像顺序关系                                  zIndex: 3                              },                              spline:{                                  // 允许线性图上的数据点进行点击                                  allowPointSelect: true,                                  // 数据点的点击事件                                  events:{                                      click: function(event){                                          //alert('The bar was clicked, and you can add any other functions.');                                      }                                  },                                  // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。                                  point:{                                      events:{                                          click: function(){                                              //alert('This point on the line was clicked. You can and any other functions.');                                          }                                      }                                  },                                  // 是否在图注中显示。                                  showInLegend: true,                                  // 调整图像顺序关系                                  zIndex: 3                              },                              pie:{                                  // 是否允许扇区点击                                  allowPointSelect: true,                                  // 点击后，滑开的距离                                  slicedOffset: 5,                                  // 饼图的中心坐标                                  center: [100, 80],                                  // 饼图的大小                                  size: 100,                                  // 数据标签                                  dataLabels: {                                      // 是否允许标签                                      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: false,                                  // 调整图像顺序关系                                  zIndex: 0                              }                          },                          labels: {                              items: [{                                      html: '水果总消耗量',                                      style: {                                          left: '65px',                                          top: '8px',                                          color: 'black'                                      }                                  }]                          },                          series: [{                                  type: 'column',                                  name: 'Jane',                                  data: [3, 2, 1, 3, 4]                              }, {                                  type: 'column',                                  name: 'John',                                  data: [2, 3, 5, 7, 6]                              }, {                                  type: 'column',                                  name: 'Joe',                                  data: [4, 3, 3, 9, 0]                              }, {                                  type: 'spline',                                  name: '平均',                                  data: [3, 2.67, 3, 6.33, 3.33]                              }, {                                  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                                      }]                              }]                      });                  });            });  ---------------------------------------------------------------------------------2. highstock实例代码，其中导出功能配置了本地化，用的是exporting中的导出接口。            //图表              $(function() {                  var chart1 = new Highcharts.StockChart({                      chart: {                          renderTo: 'container',                          // 图表宽度                          width: 700,                          // 图表高度                          hight: 500                      },                      credits:{                          enabled: false,                          href: "http://www.msnui.tk/Admin",                          text: '微源网络科技'                      },                      lang:{                          months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],                          shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],                          weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],                          exportButtonTitle:'导出PDF',                          printButtonTitle:'打印报表'                      },                      exporting:{                          // 是否允许导出                          enabled:true,                          // 按钮配置                          buttons:{                              // 导出按钮配置                              exportButton:{                                  menuItems: null,                                  onclick: function() {                                      this.exportChart();                                  }                              },                              // 打印按钮配置                              printButton:{                                  enabled:false                              }                          },                          // 文件名                          filename: '报表',                          // 配置导出接口                          url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',                          // 导出文件默认类型                          type:'application/pdf'                      },                      title: {                          text: '图表实例标题'                      },                      rangeSelector: {                          // 缩放选择按钮，是一个数组。                          // 其 中type可以 是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。                          // 其中count是指多少个单位type。                          // 其中text是配置显示在按钮上的文字                          buttons: [{                                  type: 'month',                                  count: 1,                                  text: '1月'                              }, {                                  type: 'month',                                  count: 3,                                  text: '3月'                              }, {                                  type: 'month',                                  count: 6,                                  text: '6月'                              }, {                                  type: 'year',                                  count: 1,                                  text: '1年'                              },{                                  type: 'year',                                  count: 3,                                  text: '3年'                              }, {                                  type: 'all',                                  text: '所有'                              }],                          // 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……                          selected: 1,                          // 是否允许input标签选框                          inputEnabled: false                      },                      tooltip:{                          // 日期时间格式化                          xDateFormat: '%Y-%m-%d %A'                      },                      xAxis:{                          // 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式                          dateTimeLabelFormats: {                              second: '%Y-%m-%d %H:%M:%S',                              minute: '%Y-%m-%d %H:%M',                              hour: '%Y-%m-%d %H:%M',                              day: '%Y %m-%d',                              week: '%Y %m-%d',                              month: '%Y-%m',                              year: '%Y'                          }                      },                      series: [{                              name: '数据名称',                              data: usdeur                          }]                  });              });
转自杭州丁俊的博客
http://blog.sina.com.cn/s/blog_4adc4b090101l5di.html
如果有什么问题或建议，欢迎留言……^^
0 0