Question

在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类型设置为＆＃39;类别＆＃39; 。这样可以确保将年份显示为表中定义的字符串。

xAxis: {
    type: "category"
},

Answer 1

您可以使用xAxis格式化程序

隐藏不在数据表中的标签

  xAxis: {
    labels: {
      formatter: function() {
        if (this.chart.series[0].xData.indexOf(this.value) == -1) {
          return null;
        } else {
          return this.value
        }
      },
    },
  },

这里是完整的fidle http://jsfiddle.net/1ofs0mof/1/

<强>更新

如果你想要隐藏空间，我唯一能想到的就是让highcharts认为类别是字符串，方法是在表<th>1990A</th>的第一年添加A，并在标签格式化程序中替换A用空字符串

这是完整的小提琴http://jsfiddle.net/1ofs0mof/3/

如何删除Highcharts中的空轴刻度？

1 个答案: