highcharts 应用总结

背景：新开发一个模块，需要将Top数据以图表形式展现，网上查找了一些资料后，选择了highcharts。写这篇博文是为了记录下应用的流程，便于以后回顾。

highcharts中文网：http://www.hcharts.cn/demo/index.php?p=27

highcharts交流群：63112678

/*
 * 创建图表展示
 */
function createHighChart(){
	/*var x_categ = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月','10月','11月','12月'];
    var series = [{name: '宝路',visible:true,data: [100, 120, 140,160,180,200,220,240,260,280,300,320]},
                  {name: '伟嘉',visible:true,data: [90, 110, 130,150,170,190,210,230,250,270,290,310]},
                  {name: '宠物',visible:true,data: [110, 130, 150,170,190,210,230,250,270,290,310,330]},
                  {name: '猫狗',visible:true,data: [120, 140,160,180,200,220,240,260,280,300,320,340]}];*/
	var dataval = $("#data_result").text();
    //dataval = JSON.parse(dataval);
    dataval = eval("("+dataval+")");
    var series = [{name: dataval.x_name,visible:true,data: dataval.x_data}];
    var x_categ = dataval.x_categ;
    
    // 创建展示图表
    high_chart = new Highcharts.Chart({
    //$('#container').highcharts({                   //图表展示容器，与div的id保持一致
        chart: {
        	renderTo: 'container',
            type: 'column',                         //指定图表的类型，默认是折线图（line）
            //inverted: true							//横纵坐标
        },
        title: {
            text: dataval.title_name      //指定图表标题
        },
        xAxis: {
            //categories: dataval.x_key,   //指定x轴分组
            /*formatter: function () {
            	//获取到刻度值
            	var labelVal = this.value;
            	//实际返回的刻度值
            	var reallyVal = labelVal;
            	//判断刻度值的长度
            	if(labelVal.length > 5){
            		//截取刻度值
            		reallyVal = labelVal.substr(0,5);
            	}
            	return reallyVal;
            }*/
        },
        yAxis: {
            title: {
                text: dataval.y_name                  //指定y轴的标题
            }
        },
        credits:{
            enabled:false
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                events: {
                    click: function (e) { //给series绑定click事件
                    	$("#chartsobj_detail").hide("slide");
						$(".goods_detail table tr").eq(2).html("");
                    	write_content(e.point.category,dataval);
                    }
                }
            }
        },
        series: series,
        /*series: [{                               //指定数据列
            name: 'Jane',                          //数据列名
            data: [1, 0, 4],                       //数据
            visible: true						   //是否显示
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]*/
        tooltip: {
            /*headerFormat: '<span style="font-size:10px" class="pointkey">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f}万元</b></td></tr>',
            footerFormat: '</table>',*/
        	formatter: function() {
        		var type = "";
        		if ($("#charts_y").val() == "goods_sales_cash"){
        			type = "元";
        		}
        		else if ($("#charts_y").val() == "goods_sales_num"){
        			type = "件";
        		}
        		else if ($("#charts_y").val() == "goods_order_num"){
        			type = "笔";
        		}
        		//当鼠标悬置数据点时的格式化提示
        		return '<span style="font-size:10px" class="pointkey">'+dataval.x_categ[this.x]+'</span><table>'+
        		'<tr><td style="color:'+this.color+';padding:0">'+dataval.y_name+': </td>' +
                '<td style="padding:0"><b>'+this.y+type+'</b></td></tr>'+'</table><span style="color:red;">点击可查看详细信息</span>';
        	},
            shared: true,
            useHTML: true
        }
    });
}

备注：代码创建的图形是柱状图，之前看中文文档后开始coding，遇到过3个地方的问题没有马上找到解决方案。

1.重写鼠标悬置柱状图时的提示框内容，不知道应该将处理方法放在哪里。后来询问群里朋友后，获知可以写在tooltip的formatter里，函数返回的内容就是提示框里的html代码。

2.点击柱状图时，展示该柱状图代表数据的详细信息，不清楚的也是不知道应该怎么绑定元素。之后也是通过询问群里的朋友找到的解决方法，写在plotOptions下面的event里的click里面，即为对应处理点击事件。

3.点击柱状图展示详细数据，想要获取柱状图对应的x轴数据以期获得数组对应key时。直接用this.x在浏览器兼容性上没有完美匹配，然后通过获取触发事件对象属性e.point.category来取值。

4.在后台拼接图形显示需要用到的数据时，需要特别注意两个问题：a.数据结构必须保证规范(主要是数组和对象) b.展示的详细数据data必须是数值型的，不能为字符串，否则会显示成undefined。

总结：用新东西遇到问题，又不是很清楚怎么在谷歌百度里描述的时候，可以尝试加个技术群，和群里的朋友直接交流的。