Copyright statement
JQuery highchartstable created by Pmsipilot, Chinese use document published by Highcharts Chinese language network
This article by Theo, Red chicken wings, Mr.zhang translation finishing, copyright Highcharts Chinese Network all, unless allowed, not allowed in any form reproduced!
I. (about) 1, introduction
Highchartstable is a plug-in for the HTML table conversion highcharts chart written in jquery.
With it, you just need to focus on the HTML table configuration to create highcharts charts!
2. Operating principle
Highchartstable uses the Data-* property of HTML5 to specify chart rendering options.
3. Browser compatibility
Highchartstable is compatible with current mainstream browsers, including:
Note: The JQuery version requires >= 1.4.3
highchartstable compatibility depends on Highcharts compatibility, Highcharts compatible with current mainstream browsers, including IE6, see Highcharts Compatibility for details
4. License (License)
Highchartstable based on the MIT license agreement
Ii. examples (Demo)
Here are some examples of how HTML tables are converted into graphs
1, Column chart (column)
Column Example
Month |
Sales |
Benefits |
January |
8000 |
2000 |
February |
12000 |
3000 |
March |
18000 |
4000 |
April |
2000 |
-1000 |
May |
500 |
-2500 |
Tips:
- 1. Please click on the Right tab to see the code, the key code is marked in red
- 2. See the Online demo >> hctable demo for more examples
- Result
- HTML Code
- Javascript Code
Valeurcolumn examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k 2, line chart
Line Example
Month |
Sales |
Benefits |
January |
8000 |
2000 |
February |
12000 |
3000 |
March |
18000 |
4000 |
April |
2000 |
-1000 |
May |
500 |
-2500 |
Tips:
- 1. Please click on the Right tab to see the code, the key code is marked in red
- 2. See the Online demo >> hctable demo for more examples
- Result
- HTML Code
- Javascript Code
Valeurline examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k 3, Mixed graph (Column + area)
Column + Area Example
Month |
Sales |
Benefits |
January |
8000 |
2000 |
February |
12000 |
3000 |
March |
18000 |
4000 |
April |
2000 |
-1000 |
May |
500 |
-2500 |
Tips:
- 1. Please click on the Right tab to see the code, the key code is marked in red
- 2. See the Online demo >> hctable demo for more examples
- Result
- HTML Code
- Javascript Code
Valeurcolumn + Area examplesalesbenefitsjanuaryfebruarymarchaprilmay-5k0k5k10k15k20k Third, use documents (document)
- 1. Use (usage)
- 2. Graphics Configuration (graph)
- 3. Legend Configuration (Legend)
- 4. Data column configuration (Series)
- 5. Line Configuration
- 6. Axis (axis)
- 7. Points (point)
- 8. Vertical line (Vertical lines)
- 9. Specific options for pie charts (pie charts specific options)
- Dynamic options implemented under 10.js (dynamically option in JavaScript)
1. Usage
Highchartstable needs to read the data and attributes from an HTML table, analyze and create a hightcharts chart. All the key to creating a chart with Highchartstable is the creation of an HTML table.
Here's a detailed description of the process of creating a chart
1), download and introduce the necessary JS file
<script type= "Text/javascript" src= "jquery.min.js" ></script><script type= "Text/javascript" src= " Highcharts.js "></script><script type=" Text/javascript "src=" Jquery.highchartsTable.js "></ Script>
2), create a chart rendering container
<div class= "container" ></div>
3), create an HTML table
In <table>
, you have to set some properties, table type and chart render container etc.
Where the name of the data column (Series) is <thead>
defined in, the value is defined in the <tbody>
<tr>
The first represents the value of the <td>
x-axis (Xaxis), the other <td>
represents the Y-value (value) of each series, and the sample code is as follows:
<table class= "Highchart" data-graph-container= "container" data-graph-type= "column" > // You must specify the render container Data-graph-container and chart type for the chart in table Data-graph-type <thead> //thead Specify data columns <tr> <th>Month</th> <th>Sales</th> </tr> </thead> < tbody> //tbody Specify data <tr> <td>January</td> <td>8000</td> </tr> <tr> <td>February</td> <td>12000</td> < /tr> </tbody></table>
4), call the chart conversion function
Finally, the highcharttable () function is raised on the table, and the code is as follows
$ (document). Ready (function () { $ ("Table.highchart"). highcharttable ();});
You can see the chart effect after completing the above steps, which details the configuration properties below.
2. Graphics option Configuration
The graph options correspond to the chart properties of Highcharts and all configuration options are listed below
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-type |
Table |
Chart type, this property is required |
- Column
- Line
- Area
- Spline
- Pie
|
Online Demo |
Caption |
Caption |
Chart title |
String |
Online Demo |
Data-graph-subtitle-text |
Table |
Subtitle |
String |
Online Demo |
Data-graph-container-before Data-graph-container |
Table |
The chart renders the container, which is a required property. There are two ways of defining: 1. If 2. Other cases set "Data-graph-container" as the class for rendering Div |
1, Data-graph-container-before:1 2, Data-graph-container:div's class |
Online Demo |
Data-graph-height |
Table |
Chart height. Unit is PX |
Number * |
Online Demo |
Data-graph-margin-top |
Table |
The top margin of the chart. Unit is PX |
Number |
Online Demo |
Data-graph-margin-right |
Table |
The right margin of the chart. Unit is PX |
Number |
Online Demo |
Data-graph-margin-bottom |
Table |
Bottom margin of chart |
Number |
Online Demo |
Data-graph-margin-left |
Table |
Left margin of chart |
Number |
Online Demo |
data-graph-inverted |
Table |
Axis Rollover property, when set to 1 o'clock, the x-axis and y-axis positions are swapped |
1 |
Online Demo |
Data-graph-area-fillopacity |
Table |
Graphic transparency, only available for area maps |
Decimal from 0-1 |
Online Demo |
Data-graph-datalabels-formatter |
Table |
DataLabels formatting functions |
Name of function |
Online Demo |
* Note: number refers to numbers, including decimals, etc.
3. Legend Configuration (Legend)
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-legend-disabled |
Table |
Disable legend |
1 |
Online Demo |
Data-graph-legend-layout |
Table |
Legend Alignment |
Vertical (vertical alignment) Hortizontal (horizontal alignment, default value) |
Online Demo |
Data-graph-legend-width |
Table |
Legend width, Unit is px |
Number |
Online Demo |
Data-graph-legend-x |
Table |
The offset of the legend in the horizontal direction, in px |
Number |
Online Demo |
Data-graph-legend-y |
Table |
The offset of the legend in the vertical direction, in px |
Number |
Online Demo |
4. Data column (Series)
|
HTML tag |
description |
value or value type |
example |
data-graph-color-x |
table |
x takes a value from 1-9, which is from data-graph-color-1 To Data-graph-color-9, which represents the color of the data column |
hexadecimal color, for example: #ff0000 |
Online demo |
data-graph-dash-stylet |
th |
data column line style |
- Dash (default, straight)
- dot
- longdash
- Shortdash
- Shortdot
- Shortdashdot
- Shortdashdotdot
|
Online Demo |
data-graph-hidden |
th |
Whether the data column is hidden by default |
1 |
online demo |
data-graph-skip |
th |
ignore a column in the diagram |
1 |
online demo |
graph-stack-group |
th |
make the columns in the table appear in the same column on the diagram by setting the same Data-graph-stack-group value |
String |
Online Demo |
5. Line Configuration
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-line-width |
Table |
Chart line width, unit is px |
Number |
Online Demo |
Data-graph-line-shadow |
Table |
A shaded area below the area chart, which is not available by setting the value of Data-graph-line-shadow to zero |
0 |
Online Demo |
6. Axis (axis)
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-xaxis-title-text |
Table |
X-Axis Title text |
String |
Online Demo |
Data-graph-xaxis-rotation |
Table |
X Axis Rotation angle |
Degree |
Online Demo |
Data-graph-xaxis-start-on-tick |
Table |
Remove the x-axis coordinate lines and the y-axis margins |
1 |
Online Demo |
Data-graph-xaxis-end-on-tick |
Table |
Remove x-axis coordinate lines and margins to the right of the graph |
1 |
Online Demo |
Data-graph-yaxis-x-formatter-callback |
Table |
X represents the subscript for the axis, for example X=1 represents the first y-axis, and x=2 represents the second y-axis. The y-axis format function, most commonly used is data-graph-yaxis-1-formatter-callback, when there are multiple Y-axes, use subscript to indicate |
Name of function |
Online Demo |
Data-graph-xaxis-min |
Table |
Minimum value of x-axis |
Number |
Online Demo |
Data-graph-xaxis-max |
Table |
Maximum value of x-axis |
Number |
Online Demo |
Data-graph-xaxis-labels-enabled |
Table |
Disable x-axis text |
0 or 1 |
Online Demo |
Data-graph-xaxis-labels-font-size |
Table |
X-Axis Text size |
CSS unit, can be%\px\em |
Online Demo |
Data-graph-yaxis-2-opposite |
Table |
The second y-axis position is reversed, which is displayed on the right side of the chart |
1 |
Online Demo |
Data-graph-yaxis-x-reversed |
Table |
The y-axis is reversed in order and displayed in order from large to small. where x represents the subscript of the y-axis |
1 |
Online Demo |
Data-graph-xaxis-type |
Table |
X-axis type, only one type is supported: datetime |
Datetime |
Online Demo |
Data-graph-yaxis-x-stacklabels-enabled |
Table |
Show total values in stacked graphs |
1 |
Online Demo |
7, coordinate points (point)
properties |
html Label |
|
value or value type |
example |
data-graph-dat alabels-enabled |
table th |
Displays the value of each point in the graph. The can be defined in a table tag to control the entire series of data or simply defined in an th tag to control a series of data. The definition in th tag overrides the value defined in table |
0 or 1 |
online demo |
data-graph-datalabels-align | Td>table
Displays the position of the point value based on the location of the point |
|
Online demo |
data-graph-point-callback |
table |
point value Show formatting functions |
Function Name |
Online Demo |
data-graph-datalabels-color |
table th |
display color can be defined in a table tag to control the entire series of data or simply defined in an th tag to Control a series of data. The definition in th tag overrides the value defined in table |
String |
Online demo |
8. Vertical line (Vertical Lines)
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-vline-x |
Th |
To draw a vertical line in a chart, you must use the Data-graph-vline-height property with the |
Number |
Online Demo |
Data-graph-vline-height |
Th |
Vertical line height, must be used in conjunction with the Data-graph-vline-x property |
Number |
Online Demo |
Data-graph-vline-name |
Th |
The name of the vertical line, shown in tooltip form |
String |
Online Demo |
9, the cake tut some properties
Properties |
Your HTML tag |
Description |
value or value type |
Example |
Data-graph-item-highlight |
Td |
Pie chart Chunk Bulge, select State |
1 |
Online Demo |
Data-graph-item-color |
Td |
Block color |
Hex color code |
Online Demo |
Data-graph-name |
Th |
Pie chart Chunk Name |
String |
Online Demo |
10. JavaScript dynamic Configuration
A function is triggered before the chart is rendered, and we can use it to modify some of the chart configurations.
For example: We want to dynamically set the chart data column color according to the chart rendering container, that is, set the Colos array, relative to the server side for each chart generated code, we provide the jquery custom function highchartTable.beforeRender
for all the chart settings are valid, A global property similar to Highcharts.
The sample code for modifying colors for all charts is as follows
$ (' Table.highchart '). Bind (' Highcharttable.beforerender ', function (event, highchartconfig) { Highchartconfig.colors = [' #104C4C ', ' #88CCCC ', ' #228E8E ', ' #CCFFFF ', ' #00CCCC ', ' #3399CC '];}). Highcharttable ();
For more configuration, refer to the Highcharts API documentation.
JQuery highchartstablehtml table to highcharts chart plugin