最近公司需要統計報表，並顯示在web端，所以學習了JavaScript的一個圖示類庫，也可以說是一個外掛，叫

        選擇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>

<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: {
                //<span style="color:#FF0000;">重要的函式部分，可以直接複製使用</span>
                <span style="color:#FF0000;">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'
			}
		}
	}
};
 

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
            }
            ]
        });
}

        最後，獻上幾張截圖：

選中連續資料點求和：

求和的同時，選中的資料點集合會被放大！

        我只能幫你到這兒了！！歡迎交流！！