jQuery HighchartsTable 将表格转换为 Highcharts 图表

Question

jQuery HighchartsTable 是一个简单的插件，能够将我们预制的表格，转换为 Highcharts 统计图表，是否你也曾想过使用 Highcharts 标识 HTML 中的表格数据，使用 jQuery HighchartsTable 这款插件能够实现。

它是如何工作的？

我们使用 HTML5 的 data-* 自定义属性指定如何呈现的 Table 表格，有许多属性可提供给您一个自定义图形的方法。

下载和安装

你可以通过下面的链接下载HighchartTable的源文件，你可以选择开发版本和压缩版本。

Latest version (2.0.0)

Latest version (2.0.0) - minified)

HighchartTable 插件需要从一个表中的数据和属性解析他们简单地创建一个 Highchart 图表，这个插件不包含 Highcharts 和 jQuery 文件，所以首先，你必须包括你的页面。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js" type="text/javascript"></script>
<script src="jquery.highchartTable.js" type="text/javascript"></script>

使用方法

你必须在 Table 表格里面设置一些属性，比如图表的类型和显示那些字段，series 属性定义在 <thead> 中，值定义在 <tbody> 中，第一个 <td> 的 <tr> 包含X轴的值。另一个包含在该值中的每个序列的值。例如下面的代码：

<table class="highchart" data-graph-container-before="1" data-graph-type="column">
  <thead>
      <tr>
          <th>Month</th>
          <th>Sales</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>January</td>
          <td>8000</td>
      </tr>
      <tr>
          <td>February</td>
          <td>12000</td>
      </tr>
  </tbody>
</table>

然后就给一个选择器，选择表highcharttable。像这样：

$(document).ready(function() {
  $('table.highchart').highchartTable();
});

这将显示一个柱图在班highchart表根据其tbody定义的值。

Graph

Attribute	Scope	Informations	Allowed values
data-graph-type	table	The data-graph-type attribute is required.	column line area spline pie
	caption	The chart's main title is defined via the table caption. <table><caption>this is a title</caption></table>	Any string
data-graph-subtitle-text	table	Graph subtitle.	Any string
data-graph-container-before data-graph-container	table	There are two ways to define where the graph must be rendered. If you want a graph before the table you can use "data-graph-container-before" otherwise use "data-graph-container" and use a CSS selector to choose where to display the graph.	For data-graph-container-before : 1 For data-graph-container : a CSS selector
data-graph-height	table	Graph height.	Height in px
data-graph-margin-top	table	Graph top margin.	Margin in px
data-graph-margin-right	table	Graph right margin.	Margin in px
data-graph-margin-bottom	table	Graph bottom margin.	Margin in px
data-graph-margin-left	table	Graph left margin.	Margin in px
data-graph-inverted	table	Inverts the graph axes.	1
data-graph-area-fillOpacity	table	Works only on area graphs.	Decimal from 0 to 1
data-graph-datalabels-formatter	table	Callback to format the datalabels displayed on the chart.	Name of the function to call

Legend

Attribute	Scope	Informations	Allowed values
data-graph-legend-disabled	table	Disable the legend.	1
data-graph-legend-layout	table		vertical/hortizontal (default : horizontal)
data-graph-legend-width	table		width in px
data-graph-legend-x	table	Legend x offset	offset in px
data-graph-legend-y	table	Legend y offset	offset in px

Series

Attribute	Scope	Informations	Allowed values
data-graph-color-1	table	From data-graph-color-1 to data-graph-color-9. Where the number is the serie index (starting from 1).	hexadecimal color
data-graph-hidden	th	Hide the serie by default. It could be displayed by clicking on the legend.	1
data-graph-skip	th	Ignores the serie.	1
data-graph-dash-style	th		dash dot longdash shortdash shortdot shortdashdot shortdashdotdot
graph-stack-group	th	Allows to display series on the same column by setting the same data-graph-stack-group value for those series.	Any string

Lines

Attribute	Scope	Informations	Allowed values
data-graph-line-width	table		width in px
data-graph-line-shadow	table	Area graphs has a shadow under the line. To disable it set the value of the data-graph-line-shadow attribute to 0.	0

Axes

Attribute	Scope	Informations	Allowed values
data-graph-xaxis-title-text	table		Any string
data-graph-xaxis-rotation	table	Default : 0	Degres
data-graph-xaxis-start-on-tick	table	Remove margin between the line and Y axis.	1
data-graph-xaxis-end-on-tick	table	Remove margin between the line and the graph end.	1
data-graph-yaxis-X-formatter-callback	table	Callback to format the YAxis values. Where x is the number of the axis (generaly data-graph-yaxis-1-formatter-callback)	Name of the function to call
data-graph-xaxis-min	table	Highcharts detects the minimum values of the X axis, but sometimes it is usefull to force this value.	Decimal
data-graph-xaxis-max	table	Highcharts detects the maximum values of the X axis, but sometimes it is usefull to force this value.	Decimal
data-graph-xaxis-labels-enabled	table	Allows to specify if the labels on the X-axis must be enabled and displayed (default) or disabled.	0 / 1
data-graph-xaxis-labels-font-size	table	Allows to specify the font size that should be used for labels on the X-Axis.	Valid CSS size	65% 1.5em
data-graph-yaxis-2-opposite	table	Move the second Yaxis to the right. You must use data-graph-yaxis to define which serie is on the second axis.	1
data-graph-yaxis-X-reversed	table	Higher values are closer to the xAxis.	1
data-graph-xaxis-type	table	Supports only one type : datetime, which displays irregular time data	datetime
data-graph-yaxis-X-stacklabels-enabled	table	Displays total on columns when they are stacked with the data-graph-stack-group attribute.	1

Points

Attribute	Scope	Informations	Allowed values
data-graph-datalabels-enabled	table th	Displays values on each point of the graph. Could be defined for all the chart on the table tag or just for one serie on the th tag. The th tag value overrides the table tag value.	1 or 0
data-graph-datalabels-align	table	Defines where to put the label according to the point position.	right center left
data-graph-point-callback	table		Name of the function to call, the first parameter is an Highcharts Point object
data-graph-datalabels-color	table th	Change the datalabel color. Could be defined for all the chart on the table tag or just for one serie on the th tag. The th tag value overrides the table tag value.	Any string

Vertical Lines

Attribute	Scope	Informations	Allowed values
data-graph-vline-x	th	Arbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-height attribute.	decimal
data-graph-vline-height	th	Arbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-x attribute.	decimal
data-graph-vline-name	th	Value displayed on the vertical line tooltip.	decimal

Pie charts specific options

Attribute	Scope	Informations	Allowed values
data-graph-item-highlight	td	Moves the serie outside the chart to be more visible.	1
data-graph-item-color	td		hexadecimal color
data-graph-name	th	Sector's name in a pie chart	Any string

Dynamic options in javascript

Just before the graph is rendered, an event is triggered, which allows you to change the Highchart chart options.

For example, let's say that you want to define the colors of your data series according to the graph container. Instead of doing this on server-side on every chart you have, you will do this on the client side using the highchartTable.beforeRender jQuery custom event.
The second parameter contains the objet that will be passed to the Highcharts.Chart function. That's the one you must modify in order to change the colors of the graph.
The documentation about this object is available in the Highcharts doc.

$('table.highchart')
  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
    highChartConfig.colors = ['#104C4C', '#88CCCC', '#228E8E', '#CCFFFF', '#00CCCC', '#3399CC'];
  })
  .highchartTable();

Changes

In issue 8 we removed the default value for the graph-yaxis-X-title-text attribute. If you were using it, here is an example of how you can get the default value back :

  $('table.highchart')
  .bind('highchartTable.beforeRender', function(event, highChartConfig) {
    $.each(highChartConfig.yAxis, function (index, value)   {
      value.title.text = value.title.text || 'Valeur';
    });
  });

License

HighchartsTable

The highchartsTable plugin is under MIT license.

Highcharts

In order to use HighchartsTable, you need to include the Highcharts Javascript library in your page which have a different license than highartsTable.

Highcharts is licensed for free for any personal or non-profit projects under the Creative Commons Attribution-NonCommercial 3.0 License.

For commercial, corporate or government use a license is required, which can be purchased on the highcharts.com site. See the license and pricing details directly on the Highcharts site for more details.

相关链接

• 项目地址：http://highcharttable.org/
• Github地址：https://github.com/highchartTable/jquery-highchartTable-plugin