带有数据表的高图 [英] Highcharts with datatable

问题描述

有一个有关图表的示例:

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/

然后，如果需要，您应该在循环内再次绘制表格边框；)

There is an example for highcharts:

http://jsfiddle.net/highcharts/z9zXM/

However I couldn't reverse x axis and y axis at table. I mean I want it like:

Tokyo       Jan Feb ..
New York
Berlin
London

Also I want to locate that table at middle under chart.

Any ideas?

解决方案

This is how the loops should be:

// 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();

    });



});

Here is the link: http://jsfiddle.net/pJ3qL/1/

Then you should draw the table borders inside the loops again if you want ;)

这篇关于带有数据表的高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！