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。

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