ハイチャートの例があります:
http://jsfiddle.net/highcharts/z9zXM/
ただし、テーブルで x 軸と y 軸を逆にすることはできませんでした。つまり、次のようにしたいのです:
Tokyo Jan Feb ..
New York
Berlin
London
また、そのテーブルをチャートの下の真ん中に配置したいと考えています。
何か案は?
ハイチャートの例があります:
http://jsfiddle.net/highcharts/z9zXM/
ただし、テーブルで x 軸と y 軸を逆にすることはできませんでした。つまり、次のようにしたいのです:
Tokyo Jan Feb ..
New York
Berlin
London
また、そのテーブルをチャートの下の真ん中に配置したいと考えています。
何か案は?
ループは次のようになります。
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(chart.xAxis[0].categories, function(category_index, category) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
category,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(series, function(i) {
renderer.text(
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
});
リンクは次のとおりです。http://jsfiddle.net/pJ3qL/1/
次に、必要に応じて、ループ内にテーブルの境界線を再度描画する必要があります;)