jQuery HighchartsTable 将表格转换为 Highcharts 图表 - 文章教程

jQuery HighchartsTable 将表格转换为 Highcharts 图表

发布于 2019-08-19 字数 15101 浏览 1365 评论 0

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

jQuery HighchartsTable 将表格转换为 Highcharts 图表

它是如何工作的?

我们使用 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.

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0