如何使用 Highcharts 在柱形图中仅在 xAxis 上显示特定年份

How to display specific years only on xAxis in a column-graph with Highcharts

无法在我的柱形图中仅显示所选的两个年份。它总是添加其他年份,图表看起来很糟糕。它应该显示“2007”和“2010”,但显示“2006”、“2008”和“2010”。我想改变是一件小事,但我不知道那会是什么。

Here is a fiddle 这里是代码:

感谢任何提示。

    $(function () {
        var chart = new Highcharts.Chart({
            "title": {
                "text": "<span style='font-family: Helvetica'>Emissions of CO2 - from Fossil Fuels - Total (CDIAC)<\/span>",
                "useHTML": true
            },
            "yAxis": {
                "min": 0,
                "title": {
                    "text": "Gigagrams of CO2",
                    "align": "high",
                    "rotation": 0,
                    "y": -20,
                    "offset": -50
                }
            },
            "xAxis": {
                "labels": {
                    "step": 1
                },
                "tickWidth": 0,
                "showFirstLabel": true,
                "showLastLabel": true
            },
            "plotOptions": {
                "series": {
                    "connectNulls": true,
                    "shadow": false,
                    "lineWidth": 2,
                    "marker": {
                        "enabled": false
                    }
                }
            },
            "chart": {
                "renderTo": "container",
                "type": "column",
                "zoomType": "xy"
            },
            "series": [{
                "name": "Bangladesh",
                "data": [
                    [2007, 48506],
                    [2010, 56199]
                ]
            }, {
                "name": "Sri Lanka",
                "data": [
                    [2007, 12467],
                    [2010, 12720]
                ]
            }]
        });

    });

我认为您应该使用分类的 xAxis。然后你只需要两个小的改变:

  • 设置xAxis.type = 'category'
  • 将年份更改为字符串:2008 -> "2008"

演示:http://fiddle.jshell.net/3bcb8sxw/4/