关于使用highchart控件的心得。。

在做web项目时，关于统计的功能，可以使用开源控件：highchart

具体的使用方法、实例等，大家可以参考网站：www.highcharts.com　　网站上面有很多例子和源代码等。

下面是我在使用此控件的过程中，学到的些东西。欢迎大家拍砖。。。

对于highchart的参数，我列举几个比较常用的。

1.  Chart：设置图表区相关属性，其中renderTo的值，表示此图表显示的div的id名称。（后面会有如何动态设置此值的说明）
2.  xAxis ：x轴选项，即设置横坐标的相关信息。
3.  yAxis：y轴选项，即设置纵坐标的相关信息。
4. series数据列选项：用于设置图表中要展示的数据的数据相关属性。（很重要的一个属性，就是显示的数据源的信息）
5. plotOption数据点选项：根据图表类型不同，属性也有差异。所以不做详细说明。
6. tooltip数据点提示框：当鼠标划到图上时，显示的提示信息。
7. legend图例选项：设置图例相关信息，即那个小的说明的信息。

下面以柱状图为例说明：

动态对图表（横坐标）赋值：

　　对于只显示一列的情况：

• 先对highchart进行声明：

 var colors;
        $(function () {
            $(document).ready(function () {
                colors = Highcharts.getOptions().colors;
                categories = [];
                name = '';
                data = [];

                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: "container",
                        type: 'column'
                    },
                    title: {
                        text: '多人工作量对比图'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        title: {
                            text: '工作量（小时/人）'
                        }
                    },
                    legend: {
                        layout: 'horizontal',  
                        backgroundcolor: '#fff',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 50,
                        y: -10,
                        floating: true,
                        shadow: true
                    },
                    plotOptions: {
                        column: {
                            cursor: 'pointer'
                        }
                    },
                    tooptip: {
                        formatter: function () {
                            return '' + this.x + "%%" + this.y + "";
                        }
                    },
                    series: []
                })
            })
        })

• 然后用Ajax从数据库中取数据，再利用回调函数，将返回的数据，显示出来：

  
  

  function GetRepDataByConditionResult_CallBack(result) {
              if (result.value != null) {
                  name = "绩效分数";
                  data = [];
                  for (var i = 0; i < result.value.length; i++) {
                      categories[i] = result.value[i].Key;
                          if (result.value[i].Value.toString() == "") {
                              data[i] = ["", 0];
                          }
                          else {
                              data[i] = ["", parseFloat(result.value[i].Value)];
                          }
                      }
                  chart.xAxis[0].setCategories(categories);
                      if (chart.series.length > 0) {
                          chart.series[0].remove();
                      }
                      chart.addSeries({ name: name, data: data });
              }
          }

  
  
  

　　对于显示两列对比柱状图的情况：（和上面的只在对series赋值的地方有所不同）

function GetRepDataByConditionResult_CallBack(result) {
            if (result.value != null) {
                name1 = "已投入工作量";
                name2 = "审定工作量";
                name = "绩效分数";
                data = [];
                data1 = [];
                data2 = [];
                for (var i = 0; i < result.value.length; i++) {
                    categories[i] = result.value[i].Key;
                    if (selectedTab0.className.toString() == "current") {
                        var valueTemp = (result.value[i].Value).split("#"); //工作量值
                        if (valueTemp.length > 0) {
                                if (valueTemp[0].toString() == "") {
                                    data1[i] = ["", 0];
                                }
                                if (valueTemp[1].toString() == "") {
                                    data2[i] = ["", 0];
                                }
                            }
                            else {
                                data1[i] = ["", parseFloat(valueTemp[0])];
                                data2[i] = ["", parseFloat(valueTemp[1])];
                            }
                        }
                }
                chart.xAxis[0].setCategories(categories);
                    if (chart.series.length > 0) {
                        for (var i = 0; i < 2; i++) {
                            chart.series[0].remove();
                        }
                    }
                    chart.addSeries({ name: name1, data: data1 });
                    chart.addSeries({ name: name2, data: data2 });
            }
        }

动态设置显示的div的id、图表标题、横坐标等：

options.chart.renderTo = "statWork";
                        options.title.text = "多人工作量统计";
                        options.yAxis.title.text = "工作量（小时/人）";

当横坐标的值较多时，横坐标呈倾斜显示：

chart.xAxis[0].options.labels.align = "right";
                        chart.xAxis[0].options.labels.rotation = -45;