Question

任何人都可以帮助我，我试图在不同的列中显示图表，但它只显示我的数据。

图代码：

var c=0;
 Highcharts.visualize = function(table, options) {

            // the categories
            options.xAxis.categories = [];
            $('tbody th', table).each( function(i) {
                options.xAxis.categories.push(this.innerHTML);
            });

            // the data series
            options.series = [];
            $('tr', table).each( function(i) {
                var tr = this;

                $('th, td', tr).each( function(j) {
                c++;
                    if (j > 0) { // skip first column
                        if (i == 0) { // get the name and init the series
                            options.series[j - 1] = {
                                name: this.innerHTML,
                                data: []

                            };
                        } else { // add values
                            options.series[j - 1].data.push(parseFloat(this.innerHTML));
                            //alert(this.innerHTML);
                        }
                    }
                });
            });

            var chart = new Highcharts.Chart(options);

        }


function Grafica()
        {       

        var table = document.getElementById('datatable'),
        options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            xAxis: {
            },
            yAxis: {
                title: {
                    text: 'Units'
                }
            },
             plotOptions: {
                                        series: {
                                            stacking: 'normal',
                                            dataLabels: {
                                              enabled: false
                                        },}},
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.y +' '+ this.x.toLowerCase();
                }
            }
        };

        Highcharts.visualize(table, options);

    }

db data：

date        <table width="75%" cellspacing="0" border="0" style="display:none" class="stat" id="datatable">
                        <thead>
                        <tr align='center'>
<th class='stat'><font color='#F5F5F5'>fecha</font></th><th class='stat'><font color='#F5F5F5'>No Conformidades Registradas</font></th><th class='stat'><font color='#F5F5F5'>No Conformidades Cerradas</font></th><th class='stat'><font color='#F5F5F5'>1 dia</font></th><th class='stat'><font color='#F5F5F5'>2 dias</font></th><th class='stat'><font color='#F5F5F5'>3 dias</font></th><th class='stat'><font color='#F5F5F5'>4 dias</font></th><th class='stat'><font color='#F5F5F5'>5 dias</font></th><th class='stat'><font color='#F5F5F5'>6 dias</font></th><th class='stat'><font color='#F5F5F5'>7 dias</font></th><th class='stat'><font color='#F5F5F5'>8 dias</font></th><th class='stat'><font color='#F5F5F5'>9 dias</font></th><th class='stat'><font color='#F5F5F5'>10 dias</font></th><th class='stat'><font color='#F5F5F5'>11 dias</font></th><th class='stat'><font color='#F5F5F5'>12 dias</font></th><th class='stat'><font color='#F5F5F5'>13 dias</font></th><th class='stat'><font color='#F5F5F5'>14 dias</font></th><th class='stat'><font color='#F5F5F5'>15 dias</font></th><th class='stat'><font color='#F5F5F5'>+15 dias</font></th></tr>                        
                        </thead>
                        <tbody>
             <tr><th class='stat'>JUL, 2014</th><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>MAY, 2014</th><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>APR, 2014</th><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>FEB, 2014</th><td>5</td><td>2</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td></tr><tr><th class='stat'>JAN, 2014</th><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>SEP, 2013</th><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>AUG, 2013</th><td>3</td><td>3</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td></tr><tr><th class='stat'>JUL, 2013</th><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td></tr><tr><th class='stat'>JUN, 2013</th><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr><th class='stat'>OCT, 2013</th><td>4</td><td>4</td><td>0</td><td>0</td><td>0</td><td>1</td><td>1</td><td>0</td><td>0</td><td>1</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>1</td></tr>                        </tbody>
                        <tfoot>
                        <tr align=center>
<th class='stat'><font color=#F5F5F5>fecha</font></th><th class='stat'><font color=#F5F5F5>No Conformidades Registradas</font></th><th class='stat'><font color=#F5F5F5>No Conformidades Cerradas</font></th><th class='stat'><font color=#F5F5F5>1 dia</font></th><th class='stat'><font color=#F5F5F5>2 dias</font></th><th class='stat'><font color=#F5F5F5>3 dias</font></th><th class='stat'><font color=#F5F5F5>4 dias</font></th><th class='stat'><font color=#F5F5F5>5 dias</font></th><th class='stat'><font color=#F5F5F5>6 dias</font></th><th class='stat'><font color=#F5F5F5>7 dias</font></th><th class='stat'><font color=#F5F5F5>8 dias</font></th><th class='stat'><font color=#F5F5F5>9 dias</font></th><th class='stat'><font color=#F5F5F5>10 dias</font></th><th class='stat'><font color=#F5F5F5>11 dias</font></th><th class='stat'><font color=#F5F5F5>12 dias</font></th><th class='stat'><font color=#F5F5F5>13 dias</font></th><th class='stat'><font color=#F5F5F5>14 dias</font></th><th class='stat'><font color=#F5F5F5>15 dias</font></th><th class='stat'><font color=#F5F5F5>+15 dias</font></th></tr>

                        </tfoot>
                   </table>

Answer 1

您的示例似乎工作正常，请参阅演示：http://jsfiddle.net/v7gMP/

 var options = {
    xAxis:{
        categories:[]
    }
};

Datatable Highcharts

1 个答案: