Question

我在使用Datatable动态加载表数据后呈现Highcharts。

我正面临着图表中条形图的问题。请检查下面的代码。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/data.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
        </script>
    </head>

    <body>
        <div id="advertiser_chart"></div>
        <table id="datatable">
            <thead>
                <tr role="row">
                    <th class="sorting_disabled" rowspan="1" colspan="1">Month</th>
                    <th class="sorting_disabled" rowspan="1" colspan="1">Order</th>
                    <th class="sorting_disabled" rowspan="1" colspan="1">Revenue</th>
                </tr>
            </thead>
            <tbody>
                <tr role="row" class="odd">
                    <td>2016</td>
                    <td>3</td>
                    <td>11</td>
                </tr>
                <tr role="row" class="even">
                    <td>2015</td>
                    <td>1</td>
                    <td>3</td>
                </tr>
                <tr role="row" class="odd">
                    <td>2014</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="even">
                    <td>2013</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="odd">
                    <td>2012</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </body>
    <script type="text/javascript">
        $('#advertiser_chart').highcharts({
        data: {
            table: 'datatable'
        },
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: ''
            }
        },
        xAxis: {
            allowDecimals: false,
            title: {
                text: ''
            }
        },
        tooltip: {
            formatter: function () {
                //return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase();
                return '<b>' + this.series.name + '</b><br/>' + this.y;    
            }
        },
        plotOptions: {
            series: {
                //pointWidth: 40,// Remove padding between olumns
            }
        }
    });
    </script>
</html>

我能得到任何解决方案吗？

这也是小提琴

https://fiddle.jshell.net/ra527ee8/

Answer 1

在动态渲染表数据时，请尝试按降序加载数据，以防数据降序。

你的表应该如下所示，并替换表体：

<tbody>
                <tr role="row" class="odd">
                    <td>2012</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="even">
                    <td>2013</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="odd">
                    <td>2014</td>
                    <td>0</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="even">
                    <td>2015</td>
                    <td>1</td>
                    <td>3</td>
                </tr>
                <tr role="row" class="odd">
                    <td>2016</td>
                    <td>3</td>
                    <td>11</td>
                </tr>
            </tbody>

在Highcharts中发布最后一列宽度

1 个答案: