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

soat7uwm 于 2023-06-06 发布在 Highcharts

关注(0)|答案(2)|浏览(209)

在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"
},

highcharts

来源：https://stackoverflow.com/questions/43317529/how-to-remove-empty-axis-ticks-in-highcharts

2条答案

按热度按时间

qco9c6ql1#

可以使用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/

赞(0）回复(0）举报 2023-06-06

dphi5xsq2#

试试这个：

xAxis: {
         type: "category", //add type name is category     
 }

示例：

Highcharts.chart('metabolicScore', {
        chart: {
            type: 'areaspline'
        },
        title: {
            text: '1. Metabolic Score',
            align: "left",
            margin: 30
        },
        legend: {
            align: 'left',
            verticalAlign: 'top',
            layout: 'horizontal',
            padding: 3,
            itemMarginBottom: 20,
            ltr: true,
        },
        xAxis: {
            type: "category",
            // type: "datetime",  
            startOnTick: true,
            endOnTick: true,
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%e %b, %Y', this.value);
                }
            },
            scrollbar: {
                enabled: true
            },
            tickInterval: 24 * 3600 * 1000
    
        },
        yAxis: {
    
            title: {
                text: 'Metabolic Score'
            },
            scrollbar: {
                enabled: true
            },
            tickLength: 0,
            allowDecimals: true,
            labels: {
                format: '{value}'
            },
            gridLineDashStyle: 'longdash',
    
    
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.1
            }
        },
    
        series:series,
        credits: {
            enabled: false
        },
        navigation: {
            buttonOptions: {
                theme: {
                    style: {
                        fontSize: '20px',
                        color: '#888',
                        item: "-20px"
                    },
                    states: {
                        hover: {
                            style: {
                                color: '#000'
                            }
                        }
                    }
                },
                useHTML: true
            }
        },
    
        exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: '<i class="fa fa-download"></i>',
                    // Use only the download related menu items from the default
                    // context button
                    menuItems: [
                        'downloadXLS',
                        'downloadCSV',
                    ]
                }
            }
        }
    });

输出：

enter image description here

赞(0）回复(0）举报 2023-06-06

我来回答

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

2条答案

相关问题

热门标签

最新问答