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"
  }
]

J

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