Javascript 将x轴标签放入表格的第一列-highcharts
我正在尝试从高图表创建一个表 我正在将所有数据正确地放入表中。但作为第一列,我需要x轴标签。如何得到它。作为列标题,我需要Javascript 将x轴标签放入表格的第一列-highcharts,javascript,html,highcharts,Javascript,Html,Highcharts,我正在尝试从高图表创建一个表 我正在将所有数据正确地放入表中。但作为第一列,我需要x轴标签。如何得到它。作为列标题,我需要日期,作为列值,我需要日期值 看 截图: 我正在使用以下代码: Highcharts.drawTable = function() { // user options var tableTop = 310, colWidth = 100, tableLeft = 20, rowHeight = 20, cellPadding = 2.5,
日期
,作为列值,我需要日期值
看
截图:
我正在使用以下代码:
Highcharts.drawTable = function() {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = '';
// 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',
color:'red'
})
.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'
})
.css({
fontWeight: 'bold',
color:'blue'
})
.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
);
}
});
您正在使用
datetime
xAxis,因此不能在drawTable
code中使用类别。改为使用包含点的所有时间戳的系列[0].xData
。看
更改部分:
// draw category labels
$.each(chart.series[0].xData, function(i, name) {
renderer.text(
Highcharts.dateFormat('%a %d %b', name),
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold',
})
.add();
});
可以使用以下方法获取x轴标签:
Highcharts.dateFormat('%a %d %b',point.x)
像这样的