4种样式的HTML可视化图形报表
4种样式的HTML可视化图形报表
该可视化插件一个结构良好的HTML表格元素解析的重要内容，并充分利用本地的帆布HTML5的绘画能力，转变成图表或图形可视化他们。 例如，表行数据的值作为图表酒吧，线条或扇形边，表头成为价值和传说标签;和价值观的标题和标题内提供图片标题标签。 还可视化自动在图表中的最高值和最低值的检查，并用它们来计算线和条形图的X轴的值。 最后，这个插件包括两个不同的CSS风格 - 一盏灯，一个黑暗的 - 这可以作为是，或者可以作为一个起点，以自定义图表和图形表示匹配任何应用程序风格。
使用方法：
首先，您需要创建表标记：
<table >
<caption>2009 Employee Sales by Departmentcaption>
<thead>
<tr>
<td>td>
<th scope="col">foodth>
<th scope="col">autoth>
<th scope="col">householdth>
<th scope="col">furnitureth>
<th scope="col">kitchenth>
<th scope="col">bathth>
tr>
thead>
<tbody>
<tr>
<th scope="row">Maryth>
<td>190td>
<td>160td>
<td>40td>
<td>120td>
<td>30td>
<td>70td>
tr>
<tr>
<th scope="row">Tomth>
<td>3td>
<td>40td>
<td>30td>
<td>45td>
<td>35td>
<td>49td>
tr>
<tr>
<th scope="row">Bradth>
<td>10td>
<td>180td>
<td>10td>
<td>85td>
<td>25td>
<td>79td>
tr>
<tr>
<th scope="row">Kateth>
<td>40td>
<td>80td>
<td>90td>
<td>25td>
<td>15td>
<td>119td>
tr>
tbody>
table>
请注意，我们使用了一个 标题 元素，总结表数据。 这将用于在可视化插件来创建一个图表上的标题。 我们还定义了我们的表格标题使用 日 元素，让脚本知道应该使用哪些单元格作为数据集的标题。 现在，我们有我们的HTML表格，我们可以生成一个图表。 他们只是在 jQuery的 ，我们的可视化插件的JavaScript和CSS文件到你的网页，并调用 可视化（） 这个方法，如表：
$('table').visualize();
图表更新 在可视化的图表插件生成的每有一个自定义事件可以被用来刷新自己使用其原始设置，它应该包括哪些表拉数据。 这通常是可以方便的更新动态页面与图表。 事实上，我们在上面使用此事件在创建可编辑的表格的例子。 要刷新现有图表，简单的触发 visualizeRefresh 此事件上生成的图表样的因素：
$('.visualize').trigger('visualizeRefresh');
使用CSS样式的图表
visualize.css – sets structural properties like display and positioning that control layout and placement. This stylesheet is required for the charts to appear as they do in the demo.
visualize-dark.css – contains style properties for the dark look-and-feel, as shown in the demo above
visualize-light.css – can be used in place of visualize-dark.css for a lighter
配置直观地创建定制图表
下列选项可用于配置的图表和视觉特征的类型可供选择：
type: string. Accepts 'bar', 'area', 'pie', 'line'. Default: 'bar'.
width: number. Width of chart. Defaults to table width
height: number. Height of chart. Defaults to table height
appendTitle: boolean. Add title to chart. Default: true.
title: string. Title for chart. Defaults to text of table's Caption element.
appendKey: boolean. Add the color key to the chart. Default: true.
colors: array. Array items are hex values, used in order of appearance. Default: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']
textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].
parseDirection: string. Direction to parse the table data. Accepts 'x' and 'y'. Default: 'x'.
pieMargin: number. Space around outer circle of Pie chart. Default: 20.
pieLabelPos: string. Position of text labels in Pie chart. Accepts 'inside' and 'outside'. Default: 'inside'.
lineWeight: number. Stroke weight for lines in line and area charts. Default: 4.
barGroupMargin: number. Space around each group of bars in a bar chart. Default: 10.
barMargin: number. Creates space around bars in bar chart (added to both sides of each bar). Default: 1
