Highcharts图表缩放

最新推荐文章于 2025-06-03 09:06:06 发布

原创最新推荐文章于 2025-06-03 09:06:06 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

这段内容详细描述了如何配置Highcharts图表以实现缩放和重置功能，包括图表的动画效果、背景颜色、事件监听、缩放类型、重置按钮样式以及X轴和Y轴的设置。此外，还涵盖了图表的提示框、数据点样式和颜色配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图表参数配置

var chart = Highcharts.chart(divId,{
       chart: {
           animation: false,//去除动画效果
           backgroundColor : "",
           events: {
               selection: function (event) {

//监控图表的放大、重置事件
   if(event.resetSelection)
   {
       // 点击缩放重置
       //还原图表初始状态
       //this.zoom();
       if (!isQuery)//查询：true（放大图表，点击"返回"按钮定时器不开启）
       {
           //点击reset按钮时,重新启动定时任务
       }
   }else
   {
       //图表缩放时触发事件
                       clearTimeout(fresh);
   }
               }
               /*图表点击
               * click: function () {
                   alert('123');
               }*/
           },
           zoomType: 'x',//xy轴实现放大或缩小
           resetZoomButton: {
               position: {
                   // align: 'right', // by default
                   // verticalAlign: 'top', // by default
                   x: -20,
                   y: -50
               },
               theme:{
                   fill:"#20cdff",
                   style: {
                       color: 'white',
                       border:'none'
                   },
                   states: {
                       hover: {
                           fill: '#20cdff',
                           style: {
                               color: 'white'
                           }
                       }
                   }
               }
           },
           marginLeft:70,
           marginRight:90
           //marginTop : 70,//上边距
           //marginBottom : 45//下边距
       },
       title: {
           text: ''
       },
       /*subtitle: {
           text: '数据来源: WorldClimate.com'
       },*/
       credits: {
       enabled:false //水印
       },
       exporting: {
   enabled:false //导出
       },
       xAxis: [{
           categories: xDatas,
           type : 'category',
           crosshair: true,
           tickWidth : 0,
           lineWidth : 0,
           tickInterval: 4, //间隔多少个值显示
           labels: {
               formatter: function () {
                   var times = "";
                   if (this.value.length > 16)
                   {
                       times = this.value.substring(11,16);
                   }
                   return times;
               },
               style:{
                   color: '#90b6ce',
                   fontSize:'15px'
               }
           },
           tickPosition:'inside',//刻度线相对于轴线的位置，可用的值有 inside 和 outside，分别表示在轴线的内部和外部。默认是：outside.
           tickWidth:1.5,//坐标轴刻度线的宽度，设置为 0 时则不显示刻度线
           tickColor : 'rgba(0,92,139,1)',
           tickmarkPlacement:'on',//当值为 on 时刻度线将在分类上方显示；当值为 between 时，刻度线将在两个分类中间显示。当 tickInterval 为 1 时，默认是 between，其他情况默认是 on
           visible : true//是否显示
           //tickPixelInterval:10 //自行调整X轴刻度的间距
       }],
       yAxis: [{ // Primary yAxis
           min:0,
           max:yMaxNum,
           tickPixelInterval:55,//刻度间隔 (Y轴默认值是72，X轴是 100)
           tickAmount:11,//刻度总数
           labels: {
               format: '{value}',
               style: {
                   //color: Highcharts.getOptions().colors[0],
                   color: '#90b6ce',
                   fontSize:'15px',
                   font:'SimHei'
               }
           },
           title: {
               text: '呼入与接通数',
               style: {
                   //color: Highcharts.getOptions().colors[0]
                   color: '#90b6ce',
                   fontSize:'18px',
                   fontFamily : 'SimHei',
                   fontWeight : 'normal'
               },
               rotation:0,//旋转
               //y:-320,

x:75
 },
 gridLineDashStyle: 'shortdash',
 gridLineColor : 'rgba(0,92,139,1)',
 lineWidth : 1.5,
 lineColor : 'rgba(0,92,139,1)',
 allowDecimals:false //是否允许刻度有小数
 }, { // Secondary yAxis
 min:0,
 max:100,
 tickPixelInterval:55,//刻度间隔 (Y轴默认值是72，X轴是 100)
 tickAmount:11,//刻度总数
 title: {
 text: '接通率',
 style: {
 //color: Highcharts.getOptions().colors[0]
 color: '#90b6ce',
 fontSize:'18px',
 fontFamily : 'SimHei',
 fontWeight : 'normal'
 },
 rotation:0,//旋转
 //y:-320,
 x:-35
 },
 labels: {
 format: '{value}%',
 style: {
 //color: Highcharts.getOptions().colors[0],
 color: '#90b6ce',
 fontSize:'15px'
 }
 },
 opposite: true,
 gridLineDashStyle: 'shortdash',
 gridLineColor : 'rgba(0,92,139,1)',
 lineWidth : 1.5,
 lineColor : 'rgba(0,92,139,1)'
 //allowDecimals:true //是否允许刻度有小数
 }],
 tooltip: {
 shared : true,
 borderWidth: 0,
 headerFormat: '{point.key}<table> ',//提示框头部
 pointFormat: '{series.name}: {point.y} ',
 backgroundColor: 'rgba(0,29,61,0.7)',
 padding:15,
 //valueDecimals: 2
 style:{
 lineHeight:"36px"
 }
 },
 plotOptions: {
 series:
 {
 marker:
 {
 enabled: true,//数据点
 symbol:'circle'//数据点形状
 },
 fillOpacity: 0.1//设置区域的透明度 fillOpacity: num 最大为1
 }
 },
 legend: {
 enabled: true,
 itemDistance: 50,
 itemStyle: { // 数据图例字体样式
 color: '#90b6ce',
 fontSize : '20px',
 fontFamily : 'SimHei',
 fontWeight : 'normal'
 },
 itemHoverStyle: {
 color: '#fff'
 },
 lineWidth : 2,
 itemMarginBottom: 50,
 verticalAlign: 'top'
 },
 colors:[ // 颜色
 '#1db9fd',
 '#ffea4d',
 '#ff834d',
 '#08ffda',
 '#ff4de4',
 '#9d77ff'
 ],
 series:[
 //turboThreshold显示的数据上限（默认1000）
 {name: '呼入数',type: 'areaspline', data: yDatas.callInData,turboThreshold : 100000},
 {name: '15秒接通数', type: 'areaspline', data: yDatas.momentAnsData,turboThreshold : 100000},
 ]
 });