jQuery HighchartsTable 将表格转换为 Highcharts 图表

发布于 2019-08-19 10:58:42 字数 14772 浏览 1615 评论 0

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

AttributeScopeInformationsAllowed values
data-graph-typetableThe data-graph-type attribute is required.
  • column
  • line
  • area
  • spline
  • pie
captionThe chart's main title is defined via the table caption.

<table><caption>this is a title</caption></table>
Any string
data-graph-subtitle-texttableGraph subtitle.Any string
data-graph-container-before
data-graph-container
tableThere 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-heighttableGraph height.Height in px
data-graph-margin-toptableGraph top margin.Margin in px
data-graph-margin-righttableGraph right margin.Margin in px
data-graph-margin-bottomtableGraph bottom margin.Margin in px
data-graph-margin-lefttableGraph left margin.Margin in px
data-graph-invertedtableInverts the graph axes.1
data-graph-area-fillOpacitytableWorks only on area graphs.Decimal from 0 to 1
data-graph-datalabels-formattertableCallback to format the datalabels displayed on the chart.Name of the function to call

Legend

AttributeScopeInformationsAllowed values
data-graph-legend-disabledtableDisable the legend.1
data-graph-legend-layouttablevertical/hortizontal (default : horizontal)
data-graph-legend-widthtablewidth in px
data-graph-legend-xtableLegend x offsetoffset in px
data-graph-legend-ytableLegend y offsetoffset in px

Series

AttributeScopeInformationsAllowed values
data-graph-color-1tableFrom data-graph-color-1 to data-graph-color-9. Where the number is the serie index (starting from 1).hexadecimal color
data-graph-hiddenthHide the serie by default. It could be displayed by clicking on the legend.1
data-graph-skipthIgnores the serie.1
data-graph-dash-styleth
  • dash
  • dot
  • longdash
  • shortdash
  • shortdot
  • shortdashdot
  • shortdashdotdot
graph-stack-groupthAllows to display series on the same column by setting the same data-graph-stack-group value for those series.Any string

Lines

AttributeScopeInformationsAllowed values
data-graph-line-widthtablewidth in px
data-graph-line-shadowtableArea graphs has a shadow under the line. To disable it set the value of the data-graph-line-shadow attribute to 0.0

Axes

AttributeScopeInformationsAllowed values
data-graph-xaxis-title-texttableAny string
data-graph-xaxis-rotationtableDefault : 0Degres
data-graph-xaxis-start-on-ticktableRemove margin between the line and Y axis.1
data-graph-xaxis-end-on-ticktableRemove margin between the line and the graph end.1
data-graph-yaxis-X-formatter-callbacktableCallback 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-mintableHighcharts detects the minimum values of the X axis, but sometimes it is usefull to force this value.Decimal
data-graph-xaxis-maxtableHighcharts detects the maximum values of the X axis, but sometimes it is usefull to force this value.Decimal
data-graph-xaxis-labels-enabledtableAllows to specify if the labels on the X-axis must be enabled and displayed (default) or disabled.0 / 1
data-graph-xaxis-labels-font-sizetableAllows to specify the font size that should be used for labels on the X-Axis.Valid CSS size65%
1.5em
data-graph-yaxis-2-oppositetableMove 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-reversedtableHigher values are closer to the xAxis.1
data-graph-xaxis-typetableSupports only one type : datetime, which displays irregular time datadatetime
data-graph-yaxis-X-stacklabels-enabledtableDisplays total on columns when they are stacked with the data-graph-stack-group attribute.1

Points

AttributeScopeInformationsAllowed values
data-graph-datalabels-enabledtable
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-aligntableDefines where to put the label according to the point position.
  • right
  • center
  • left
data-graph-point-callbacktableName of the function to call, the first parameter is an Highcharts Point object
data-graph-datalabels-colortable
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

AttributeScopeInformationsAllowed values
data-graph-vline-xthArbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-height attribute.decimal
data-graph-vline-heightthArbitrary draws a vertical line in the graph. Must be used with the data-graph-vline-x attribute.decimal
data-graph-vline-namethValue displayed on the vertical line tooltip.decimal

Pie charts specific options

AttributeScopeInformationsAllowed values
data-graph-item-highlighttdMoves the serie outside the chart to be more visible.1
data-graph-item-colortdhexadecimal color
data-graph-namethSector's name in a pie chartAny 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.

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。