在Highcharts中,我想删除xAxis上没有值的年份
是针对特定年份的。这是怎么回事?
当您查看数据表时,空年份甚至没有定义。
API给出了设置breaks的示例,但这似乎不适用于我的数据选项switchRowsAndColumns=true。
图表:The generated chart
Highcharts代码:
var $renderTo = $('#container');
var chart = Highcharts.chart({
data: {
table: 'datatable',
switchRowsAndColumns: true,
decimalPoint: ','
},
chart: {
renderTo: $renderTo[0],
type: 'line'
},
title:{
text: null
},
subtitle:{
text: null
},
xAxis: {
},
yAxis: {
title: {
text: unescape('yAxis Label')
},
stackLabels: {
enabled: false
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
spline: {
dataLabels: {
enabled: false
}
},
series: {
marker: {
radius: 1
}
}
},
series: [{
type: 'column'
}, {
type: 'column'
}, {
type: 'column'
}, {
type: 'column'
},{
type: 'column'
}, {
type: 'column'
}, {
type: 'column'
}, {
type: 'column'
},{
type: 'column'
}, {
type: 'column'
},{
type: 'column'
}, {
type: 'column'
}, {
type: 'spline'
}]
});
数据表:
<table id="datatable">
<thead>
<tr>
<th>Components</th>
<th>1990</th>
<th>2000</th>
<th>2009</th>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th>Component 1</th>
<td>31,1</td>
<td>25,7</td>
<td>24,5</td>
<td>23,0</td>
<td>24,5</td>
<td>25,5</td>
<td>25,2</td>
<td>24,8</td>
<td>23,9</td>
<td>23,1</td>
</tr>
<tr>
<th>Component 2</th>
<td>27,7</td>
<td>29,5</td>
<td>22,6</td>
<td>22,2</td>
<td>17,6</td>
<td>15,8</td>
<td>15,2</td>
<td>15,5</td>
<td>14,2</td>
<td>13,1</td>
</tr>
<tr>
<th>Component 3</th>
<td>25,6</td>
<td>24,8</td>
<td>18,1</td>
<td>18,5</td>
<td>18,3</td>
<td>18,5</td>
<td>19,9</td>
<td>18,9</td>
<td>18,2</td>
<td>17,0</td>
</tr>
<tr>
<th>Component 4</th>
<td>6,5</td>
<td>8,5</td>
<td>13,6</td>
<td>14,1</td>
<td>14,0</td>
<td>12,1</td>
<td>10,6</td>
<td>9,7</td>
<td>9,6</td>
<td>12,1</td>
</tr>
<tr>
<th>Component 5</th>
<td>2,0</td>
<td>1,0</td>
<td>1,7</td>
<td>1,4</td>
<td>1,2</td>
<td>1,2</td>
<td>1,1</td>
<td>0,9</td>
<td>1,0</td>
<td>0,9</td>
</tr>
<tr>
<th>Component 6</th>
<td></td>
<td>1,6</td>
<td>6,5</td>
<td>6,0</td>
<td>8,0</td>
<td>8,0</td>
<td>8,0</td>
<td>8,9</td>
<td>11,0</td>
<td>10,3</td>
</tr>
<tr>
<th>Component 7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0,1</td>
<td>0,2</td>
<td>1,3</td>
<td>2,0</td>
</tr>
<tr>
<th>Component 8</th>
<td>3,6</td>
<td>4,3</td>
<td>3,2</td>
<td>3,3</td>
<td>2,9</td>
<td>3,5</td>
<td>3,6</td>
<td>3,1</td>
<td>2,9</td>
<td>3,3</td>
</tr>
<tr>
<th>Component 9</th>
<td></td>
<td>0,3</td>
<td>4,4</td>
<td>4,7</td>
<td>5,3</td>
<td>6,3</td>
<td>6,5</td>
<td>6,9</td>
<td>6,9</td>
<td>7,0</td>
</tr>
<tr>
<th>Component 10</th>
<td></td>
<td>0,0</td>
<td>1,1</td>
<td>1,8</td>
<td>3,2</td>
<td>4,2</td>
<td>4,9</td>
<td>5,7</td>
<td>6,0</td>
<td>5,9</td>
</tr>
<tr>
<th>Component 11</th>
<td></td>
<td>0,3</td>
<td>0,7</td>
<td>0,7</td>
<td>0,8</td>
<td>0,8</td>
<td>0,8</td>
<td>1,0</td>
<td>0,9</td>
<td>0,9</td>
</tr>
<tr>
<th>Component 12</th>
<td>3,5</td>
<td>3,9</td>
<td>3,6</td>
<td>4,2</td>
<td>4,2</td>
<td>4,1</td>
<td>4,1</td>
<td>4,3</td>
<td>4,1</td>
<td>4,3</td>
</tr>
<tr>
<td>Component 13</td>
<td>3,6</td>
<td>6,6</td>
<td>15,9</td>
<td>16,6</td>
<td>20,2</td>
<td>22,8</td>
<td>23,9</td>
<td>25,9</td>
<td>29,0</td>
<td>29,5</td>
</tr>
</tbody>
</table>
解决方案
下面建议的解决方案作为答案工作,但这里是Highcharts的本地方法:
- 只需将xAxis类型设置为'category'*。这确保了只显示表中定义的字符串形式的年份。
xAxis: {
type: "category"
},
2条答案
按热度按时间qco9c6ql1#
可以使用xAxis格式化程序隐藏不在数据表中的标签
这里是完整的fidle http://jsfiddle.net/1ofs0mof/1/
更新:
如果你想隐藏空格,我唯一能想到的就是让highcharts认为类别是字符串,方法是在表
<th>1990A</th>
中的第一年添加A,然后在标签格式化程序中将A替换为空字符串。这里是完整的小提琴http://jsfiddle.net/1ofs0mof/3/
dphi5xsq2#
试试这个:
示例:
输出:
enter image description here