解析指定列的数据 highcharts.js

Question

我正在使用高图的 data.js 模块。数据定义在HTMLtable中。 Table 喜欢 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>

所以，我想使用第一列和第三列的数据（"Jane" 和 "Mark"，不包括 "John"）。

我该怎么做？

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

随心所欲$("#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

Answer 3

试试这个...

<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/

解析指定列的数据 highcharts.js

Parse data from specified columns highcharts.js

javascript

highcharts