Javascript Highcharts中最后一列宽度的问题_Javascript_Php_Jquery_Highcharts

Javascript Highcharts中最后一列宽度的问题

javascript php jquery highcharts

Javascript Highcharts中最后一列宽度的问题,javascript,php,jquery,highcharts,Javascript,Php,Jquery,Highcharts,在使用Datatable动态加载表数据之后，我正在呈现Highcharts 我面临着图表中条形图的问题。请检查下面的代码，看看它是什么样子 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script

在使用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>


月
命令
收入
2016
3.
11
2015
1.
3.
2014
0
0
2013
0
0
2012
0
0
$（“#广告商图”）。高图({
数据：{
表：“数据表”
},
图表：{
类型：“列”
},
标题：{
文本：“”
},
亚克斯：{
allowDecimals:false，
标题：{
文本：“”
}
},
xAxis：{
allowDecimals:false，
标题：{
文本：“”
}
},
工具提示：{
格式化程序：函数（）{
//返回'+this.series.name+'
'+this.point.y+''+this.point.name.toLowerCase（）；
返回'+this.series.name+'
'+this.y；
}
},
打印选项：{
系列：{
//pointWidth:40，//删除列之间的填充
}
}
});

有什么解决办法吗

小提琴也在这里

动态呈现表格数据时，请尝试按升序加载数据，以防数据按降序加载

您的桌子应如下所示，并替换桌子主体：

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