转 HighCharts笔记之: Bar Chart

最近需要做一些Web图标，研究了几个开源的第三方工具后，最后决定使用HighCharts开发：

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持 的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外 HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。

HighCharts 可以通过JSON 数据格式与后台交互，从而生成动态的图表。但是在官方的文档中关于 JSON 数据格式的资料很少，经过一下午的调试终于找到了关于柱状图和饼图的数据格式，在这里记录一下，以备后续的查询：

柱状图：

JSON Data Format

[
  {
      "data":[0,0,0,0,0,0,0,0,9,0,0,1],
      "name":"Actual"
  },
  {
      "data":[1,1,1,4,1,1,1,1,12,1,3,6],
      "name":"Target"
  }
]

Javascript Code

<script type="text/javascript">
  $(function () {
      var options = {
            chart: {
                renderTo: ‘container‘,
                defaultSeriesType: ‘bar‘
            },
            title: {
                text: ‘‘
            },
            subtitle: {
                text: ‘‘
            },
            xAxis: {
                categories: [‘Activity Entry‘, ‘Activity Update‘, ‘Blog Entry‘, ‘Blog Comments‘, ‘Feed‘,‘Bookmark‘,‘File‘,‘Forum Topic‘,‘Forum Reply‘,‘Wiki‘,‘Ram‘,‘Liquid‘],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: ‘Units‘,
                    align: ‘high‘
                },
                labels: {
                    overflow: ‘justify‘
                }
            },
            tooltip: {
                formatter: function() {
                    return ‘‘+
                        this.series.name +‘: ‘+ this.y;
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: ‘vertical‘,
                align: ‘right‘,
                verticalAlign: ‘top‘,
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: ‘#FFFFFF‘,
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: []
        };
      $.getJSON(‘<c:url value="/action.do?method=barChart"/>‘, function(json) {
              options.series = json;//options.series.push(json);
              //console.log("JSON: " + JSON.stringify(options));
              //console.log("Render to element with ID : " + options.chart.renderTo);
              //console.log("Number of matching dom elements : " + $("#" + options.chart.renderTo).length);
                  new Highcharts.Chart(options);
          }).error(function() {console.log(‘error‘);});
      $("a[data-toggle=modal]").click(function(){
          var target = $(this).attr(‘data-target‘);
          var url = $(this).attr(‘href‘);
          $(target).innerHTML=‘‘;
          $(target).load(url);
      });
  });
</script>

HTML Code

<div id="container" style="width: 100%; height: 400px"></div>

Java Code - action

public ActionForward barChart(ActionMapping mapping, ActionForm form,
          HttpServletRequest request, HttpServletResponse response)
          throws IOException {
      request.setCharacterEncoding("UTF-8");
      response.setCharacterEncoding("UTF-8");
      response.setContentType("application/json;charset=utf-8");
      List<Bar> resultList = getBarData();
      JSONArray json = new JSONArray(resultList);
      String result = json.toString();// 转成json数据
      PrintWriter out = response.getWriter();
      out.write(result);
      out.flush();
      out.close();
      return null;
  }
  private List<Bar> getBarData() {
      BlueCommunity target = dao.getLatestTarget();
      BlueCommunity actual = dao.sumLatestActual();
      List<Bar> resultList = new ArrayList<Bar>();
      if (actual != null) {
          resultList.add(new Bar("Actual", actual.getValueArray()));
      } else {
          resultList.add(new Bar("Actual", new int[] { 0, 0, 0, 0, 0, 0, 0,
                  0, 0, 0, 0, 0 }));
      }
      resultList.add(new Bar("Target", target.getValueArray()));
      return resultList;
  }

Java Code - Bar class

public class Bar {
  private static final long serialVersionUID = 6461863786317563773L;
  private String name;
  private int[] data;
  public Bar() {
  };
  public Bar(String name, int[] data) {
      this.name = name;
      this.data = data;
  }
  public String getName() {
      return name;
  }
  public void setName(String name) {
      this.name = name;
  }
  public int[] getData() {
      return data;
  }
  public void setData(int[] data) {
      this.data = data;
  }
}

Java Code - Community class

public class Community implements Serializable {
  private static final long serialVersionUID = -7516165631503337884L;
  private int id;
  private int version;
  private String remark;
  private int activity_entry;
  private int activity_update;
  private int blog_entry;
  private int blog_comments;
  private int feed;
  private int bookmark;
  private int file;
  private int forum_topic;
  private int forum_reply;
  private int wiki;
  private int iRam;
  private int liquid;
  private int user;
  ...
  getters;
  setters;
  ...
  public int[] getValueArray() {
      int[] array = { activity_entry, activity_update, blog_entry,
              blog_comments, feed, bookmark, file, forum_topic, forum_reply,
              wiki, iRam, liquid };
      return array;
  }
}

转 HighCharts笔记之: Bar Chart