highcharts2javatag

通过自定义标签实现highcharts 3D图表展示，借鉴了Android适配器的思想，通过固定的数据源，展现相关图表，无需考虑图表内部实现。

演示地址: http://dtmonitor.tunnel.qydev.com/highcharts2javatag/

-----------------Lombok-----------

官网地址： https://projectlombok.org/

GitHub: https://git.oschina.net/duhongming/lombok.git

-----------------highchart插件highchartTable-----------

官网地址： http://highcharttable.org/

GitHub： https://github.com/highchartTable/jquery-highchartTable-plugin

待定(直角坐标系图表展示)： http://www.hcharts.cn/test/index.php?from=demo&p=95

Maven:

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>[2.6.2,)</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>[1.16.8,)</version>
</dependency>
<dependency>
    <groupId>org.jsoup</groupId>
    <artifactId>jsoup</artifactId>
    <version>[1.8.3,)</version> 
</dependency>
<dependency>
	<groupId>commons-dbutils</groupId>
	<artifactId>commons-dbutils</artifactId>
	<version>[1.6,)</version>
</dependency>

3D条形(柱状)图Bar的Tag:

	<div id="bar3d-months"  class="main000"></div>
	<highcharts:bar3d 
		id="bar3d-months" 
		title="烟气图表汇总-除硫" 
		subtitle="烟气图表汇总-除硫" 
		xCategoriesType="months"
		xAxisTitle="月趋势"
		yAxisTitle="立方米(㎥)"
		xCategories="${xCategories}"
		yCategories="${yCategories}"/>

3D条形(柱状)图Bar的数据格式:

private List<String> xCategories;

private Map<String,List<Double>> yCategories;

3D饼状图Pie的Tag:

	<div id="pie-selected"  class="main000"></div>
	<highcharts:pie3d
		id="pie-selected" 
		title="烟气图表汇总-除硫" 
		subtitle="烟气图表汇总-除硫" 
		seriesData="${seriesData}"
		selectedData="搜索引擎"/>

3D饼状图Pie的数据格式:

private Map<String,Object> seriesData;

折线图line的Tag:

	<highcharts:line
		id="line" 
		title="烟气图表汇总-除硫" 
		subtitle="烟气图表汇总-除硫" 
		xCategoriesType="diy"
		xAxisTitle="时间趋势"
		yAxisTitle="立方米(㎥)"
		xCategories="${xCategories}"
		yCategories="${yCategories}"/>

折线图line的数据格式:

private List<String> xCategories;

private Map<String,List<Double>> yCategories;

根据Html标签的Table生成图表：

<table class="highchart-column" data-graph-container-before="1" data-graph-type="column">
  <caption>2016年销售量</caption>
  <thead>
      <tr>
          <th>月份</th>
          <th>销售额</th>
          <th>销售量</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>一月</td>
          <td>8000</td>
          <td>18000</td>
      </tr>
      <tr>
          <td>二月</td>
          <td>12000</td>
          <td>112000</td>
      </tr>
  </tbody>
</table>

<script type="text/javascript">
	$('table.highchart-column')
	  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
	    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
	    $.each(highChartConfig.yAxis, function (index, value)   {
	      value.title.text = value.title.text || '销售量';
	    });
	}).highchartTable();
</script>

灯下黑鬼吹灯 / highcharts2javatag

highcharts2javatag

简介

发行版

贡献者

近期动态

灯下黑鬼吹灯 / highcharts2javatag .gitee-modal { width: 500px !important; }

highcharts2javatag

简介

发行版

贡献者

近期动态

搜索帮助

灯下黑鬼吹灯 / highcharts2javatag