【工作记录0012】highcharts 选中 连续数据点 并求 Y轴值总和 的实现

        最近公司需要统计报表，并显示在web端，所以学习了JavaScript的一个图标类库，也可以说是一个插件，叫 highcharts，它的官方中文网 http://www.hcharts.cn  

        选择hightcharts作为web端的图标显示插件的重要原因是：hightcharts是纯js写的，开源，且灵活性很强，可以对现有模板进行二次开发设计。但有一点缺点：当数据量大时图标渲染较慢一点点，但也还是在能接受的范围内的。

        相信用过hightcharts的童鞋一定遇到过这样的问题：我直接按住鼠标左键，选中一些数据点，然后松开左键，可以直接求所选连续点数据的和吗？

        答案当然是肯定的！接下来我就教大家怎么实现这个功能。

        1、首先，肯定是要先引入 highcharts 的类库，因为还要用到jQuery，所以如下：

 

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js" type="text/javascript"></script>

        2、建立一个div容器来放置 highcharts 的图标：

 

 

<div id="container" style="min-width:400px;height:400px"></div>  

 

        3、设置 hightcharts 主题属性，特别注意chart下的events事件中的selection函数，我自己写的，可以直接复制到你自己的页面使用哦，无需修改，复制即用！

 

Highcharts.theme = {
	colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	chart: {
		backgroundColor: {
			linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
			stops: [
				[0, 'rgb(255, 255, 255)'],
				[1, 'rgb(240, 240, 255)']
			]
		},
		borderWidth: 2,
		plotBackgroundColor: 'rgba(255, 255, 255, .9)',
		plotShadow: true,
		plotBorderWidth: 1,
		events: {
                //重要的函数部分，可以直接复制使用
                selection: function(event) {
                  var text = "", label;
                  if (event.xAxis) {
                      var series = event.target.series;//获取所有数据列
                      for(var j = 0; j < series.length; j++){
                            if(series[j].visible){
                              var total = 0;
                              var data = series[j].data;
                              var selectedmin = parseInt(event.xAxis[0].min < 0 ? -1 : event.xAxis[0].min) + 1;
                              var selectedmax = parseInt(event.xAxis[0].max) + 1;
                              for (var i = selectedmin; i < selectedmax; i++) {
                                  total += data[i].y;
                              }
                              text += series[j].name + ":从 " + data[selectedmin].category + " 到 " + data[selectedmax - 1].category + ",总和:" + total + "<br />";                      
                            }
                      }
                      label = this.renderer.label(text, 80, 90)
                                .attr({
                                    fill: Highcharts.getOptions().colors[0],
                                    padding: 10,
                                    r: 5,
                                    zIndex: 8
                                })
                                .css({
                                    color: '#FFFFFF'
                                })
                                .add();
                      //淡出效果,设置5秒后消失
                      setTimeout(function() {
                          label.fadeOut();
                      }, 5000);
                  }
              }
          },
          zoomType: 'x'//放大方式,x表示横向放大</span>
	},
	title: {
		style: {
			color: '#000',
			font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	subtitle: {
		style: {
			color: '#666666',
			font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	xAxis: {
		gridLineWidth: 1,
		lineColor: '#000',
		tickColor: '#000',
		labels: {
			style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			}
		},
		title: {
			style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'

			}
		}
	},
	yAxis: {
		minorTickInterval: 'auto',
		lineColor: '#000',
		lineWidth: 1,
		tickWidth: 1,
		tickColor: '#000',
		labels: {
			style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			}
		},
		title: {
			style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
			}
		}
	},
	legend: {
		itemStyle: {
			font: '9pt Trebuchet MS, Verdana, sans-serif',
			color: 'black'

		},
		itemHoverStyle: {
			color: '#039'
		},
		itemHiddenStyle: {
			color: 'gray'
		}
	},
	labels: {
		style: {
			color: '#99b'
		}
	},

	navigation: {
		buttonOptions: {
			theme: {
				stroke: '#CCCCCC'
			}
		}
	}
};

        4、后台读取数据，并绑定到div容器：

 

 

var xData;//x轴数据
var todayAll; //y轴数据
var dialogTitleDate;//图标标题

$(function(){
        dialogTitleDate = "近30天";
	var Url ='/searchdata.aspx?t='+ new Date().getTime();
             $.ajax({
            url: Url,
            data: { act:"get" },//后台参数传递
            type: 'POST',
            //调小超时时间会引起异常
            timeout: 30000,
            //是否使用异步发送
            async: false,
            //请求成功后触发
            success: function (data) {   
           
             var result = eval("(" + data + ")");//data是后台传递的一个数据包，最好用json序列化，类对象中包含有X轴数据和y轴数据
             if(result.length == 1){
                 xData = result[0].dateList;
                 todayAll = result[0].todayAllList;
             }
            } });
	zhexiantu();
}
function zhexiantu() {
	//数据绑定
        $('#container').highcharts({
            title: {
                text: dialogTitleDate,//图标标题
                margin: 40,
                style: {
                    fontSize: '20px'
                }
            },
            subtitle: {
              text: '图标副标题',
              y: 32
            },
            credits: {
                enabled: false   //右下角不显示LOGO
            },
            exporting: {
                buttons: {
                    contextButton: {
                        enabled: false,
                        menuItems: null
                    }
                },
                enabled: true
            },
            xAxis: {
                categories:xData,//X轴数据，后台读取的，一个数组，或list
                labels: {
                    rotation: 0,
                    align: 'center',
                    style: {
                        fontSize: '14px'
                    }
                }
            },
            yAxis: {
                min: 0,
                allowDecimals:true, //是否允许刻度有小数
                title: {
                    text: 'Y轴显示标题 '
                },           
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
                style: {
                    fontSize: '14px',
                    fontFamily: 'Verdana, sans-serif'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
            },
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,//是否在数据点上显示数值
                        align: 'center',
                        style: {
                            fontSize: '10px',
                            fontWeight: 'bold'
                        },
                        color: "#FF0000"
                    }
                }
            },                                                                                                                            
            series: [{
                type: 'column', 
                name: '柱形图',
                data:todayAll  //Y轴数据，后台读取的，一个数组，或list
            }
            ]
        });
}

 

        最后，献上几张截图：

选中连续数据点求和：

求和的同时，选中的数据点集合会被放大！

 

        我只能帮你到这儿了！！欢迎交流！！