使用Chart.renderer.text呈现表格
Rendering a table with Chart.renderer.text
是否有方法使用chart.render.text
在Highcharts
中呈现表?
它的格式似乎不正确。
function(chart) { // on complete
chart.renderer.text(' <table><th>Browsers</th><tr></tr><tr><td><strong>Total Good</strong></td><td id="total" align="right">900</td></tr><tr><td><strong>Total Bad</strong></td><td id="renew" align="right">450</td></tr></table> ', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
小提琴
如果需要打印表,则应单独执行。我的意思是,使用renderer.path作为线条,使用render.text作为标签。
Highcharts.drawTable = function() {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(chart.xAxis[0].categories, function(i, name) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(series, function(i, serie) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(serie.data, function(row, point) {
// Apply the cell text
renderer.text(
Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (row + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
// horizontal lines
if (row == 0) {
Highcharts.tableLine( // top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( // bottom
renderer,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
// horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
});
// vertical lines
if (i == 0) { // left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
if (i == series.length - 1) { // right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
});
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
}
示例:-http://www.highcharts.com/docs/getting-started/frequently-asked-questions#add-数据表
相关文章:
- 如何将输入(type=text)从html表单传递到javascript函数
- 我应该使用Ng提交还是点击表格
- CSS表格:从列平移到整个表格宽度
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 滚动和表格
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- Google电子表格getValue([cell containing ])不返回制表符
- 打印预览没有应用程序页眉和页脚的html表格
- 在文本区域中使用jQuery.text()保持换行符
- 区分电子表格中的空单元格和0值
- 用Javascript添加带有#text的tr元素
- 当用户按下回车键时,自动在text区域/text中插入消息
- 使用外部数据创建仪表板(谷歌电子表格)-JavaScript
- 修正案'text'的元素
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 量角器:读取表格内容
- 使用Chart.renderer.text呈现表格
- Ms Crm 2011表格:无法读取属性'text内容'为null