我正在使用数据表动态加载表数据后渲染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/
当您动态呈现表数据时，请尝试按升序加载数据，以防数据是降序。
您的表格应如下所示，并替换表格正文：
<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>