高图表中最后一个列宽的问题
Issue with last column width in Highcharts
我正在使用数据表动态加载表数据后渲染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>
相关文章:
- 表追加而不附加最后一个元素
- 无法在Ionic select中预先选择最后一个选项
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- Jquery append oly获取循环Rails中的最后一个elemen
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 多维关联数组的最后一个索引
- 无法获取vis.js最后一个或第一个选定的网络节点
- 循环以检查数组中的最后一个图像
- 从输入值中删除最后一个单词
- 尝试使用Javascript正则表达式来获取“&"分隔文本,无论它是否's是最后一个值
- 为什么这个正则表达式不't匹配最后一个字母数字字符
- 如何从多个复选框中获取最后一个值
- 谷歌图表,有问题地获取第一个和最后一个点的趋势线值
- 如何避免 javascript 中的“最后一个逗号”陷阱(和类似问题)
- 高图表中最后一个列宽的问题
- j查询悬停问题 - 最后一个 li 元素保持悬停状态
- jQuery AJAX成功数据仅解析最后一个JSON节点的奇怪问题
- RegEx最后一个空格问题
- 停止在第一个和最后一个孩子上向左和向右滑动列表的问题