Question

我正在将data.js模块用于highcharts。 HTML表中定义的数据。表格如http://jsfiddle.net/a31yzyf1/。

<thead>
    <tr>
        <th></th>
        <th>Jane</th>
        <th>John</th>
        <th>Mark</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Apples</th>
        <td>3</td>
        <td>4</td>
        <td>1</td>
    </tr>
    <tr>
        <th>Pears</th>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>

所以，我想使用第一列和第三列中的数据（“简”和“马克”，不包括“约翰”）。

我怎么能这样做？

API建议使用方法：“startColumn”和“endColumn”，但没有像columnList（[1,3]）那样的东西。或者我错了？

Answer 1

确实，没有这样的选择，但是，您可以通过使用complete回调来实现这一目标：

    data: {
        csv: document.getElementById('csv').innerHTML,
        complete: function (options) {
            options.series.splice(1, 1); // removes one element at index=1
        }
    },

演示：http://jsfiddle.net/6jrp4ghd/

Answer 2

试试这个......

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        xAxis: {
            categories: ['Apples', 'Pears'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Units',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },

        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Jane',
            data: [3, 1]
        }, {
            name: 'Mark',
            data: [2, 4]
        }]
    });
});

<强>演示： http://jsfiddle.net/3sdw40rh/

Answer 3

Just Do $("#datatable tr th:nth-child(3), #datatable tr td:nth-child(3)").remove();

$(function () {
    $("#datatable tr th:nth-child(3), #datatable tr td:nth-child(3)").remove();    
    $('#container').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });
});

工作Fiddle

从指定列highcharts.js解析数据

3 个答案: