Javascript Highcharts：如何将x轴延伸到最后一列之外

我有一个Highcharts柱形图，其中有两列。
小提琴：

设计要求x轴向右延伸，远远超出最后一列。 你知道我该怎么做吗

这就是我的目标：

咖啡剧本：

$("#container").highcharts
chart:
  spacingRight: 200
  type : 'column'
  width: 305
  height: 250  

series: [data: [71, 29]]

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0

yAxis:
  min: 0
  title:
    text: ''
  labels:
    enabled: false
  gridLineWidth: 0 

编辑： 如果不希望保留默认项，则需要为图表指定更多要求。这仍然允许您将xAxis扩展到2个数据点之外。要调整点的宽度，您需要混合使用以下一个或多个选项：、以及其他一些选项。 是一个更新的JSFIDLE，对常规js中的代码进行了一些修改

你必须做一些类似的事情。请注意，标签格式化程序不起作用（我不熟悉coffee脚本），但基本思想就在这里。首先需要设置要使用

max:xxxx

显示的类别数量。这将扩展xAxis。然后，您可能希望隐藏该“5”，因此需要使用label formatter函数

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0
  max: 5
  labels:
    formatter: function() {
                if (this.value <> 5) {
                    return this.value;
        }
            }

xAxis:
类别：[“A栏”、“B栏”]
宽度：0
最多：5
标签：
格式化程序：函数（）{
如果（此值为0.5）{
返回此.value；
}
}

编辑： 如果不希望保留默认项，则需要为图表指定更多要求。这仍然允许您将xAxis扩展到2个数据点之外。要调整点的宽度，您需要混合使用以下一个或多个选项：、以及其他一些选项。 是一个更新的JSFIDLE，对常规js中的代码进行了一些修改

你必须做一些类似的事情。请注意，标签格式化程序不起作用（我不熟悉coffee脚本），但基本思想就在这里。首先需要设置要使用

max:xxxx

显示的类别数量。这将扩展xAxis。然后，您可能希望隐藏该“5”，因此需要使用label formatter函数

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0
  max: 5
  labels:
    formatter: function() {
                if (this.value <> 5) {
                    return this.value;
        }
            }

xAxis:
类别：[“A栏”、“B栏”]
宽度：0
最多：5
标签：
格式化程序：函数（）{
如果（此值为0.5）{
返回此.value；
}
}

我正在用Highcharts折线图做类似的事情，但这个概念也适用于柱形图（我也怀疑其他类型，尽管我没有明确尝试过）。解决方案依赖于在图表中创建一个与X轴上的类别数相同的“隐藏序列”

首先，您需要在Highcharts选项对象中将图表选项设置为true。然后，在创建序列时，将序列的选项设置为false（或者，您可以在创建序列时调用该序列），并将序列的选项也设置为false

下面是一个JSFIDLE，它显示了以下效果：。这把小提琴是从中提供的例子分支出来的

为了快速参考，这里是fiddle的javascript代码。请注意，隐藏序列数据数组中的0数与xAxis上的类别数相同

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

现在，不完全符合要求，因为在x轴下有类别标签，它们不会出现在屏幕截图中。在这种情况下，只需为类别标签提供空字符串，并完全消除记号（将xAxis选项中的和设置为0）即可实现相同的效果

下面是jsfiddle，它显示了：以及来自fiddle的javascript代码：

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        legend: {enabled:false},
        xAxis: {
            categories: ['Series 1', 'Series 2', '', '', '', '', '', '', '', '', '', ''],
            minorTickLength:0,
            tickLength:0
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

从这里，您可以通过调整类别的数量和/或调整之前参考的可用间隔选项来调整x轴延伸的长度

---

我希望这有帮助

我正在用Highcharts折线图做类似的事情，但是这个概念也适用于柱形图（我也怀疑其他类型，尽管我没有明确尝试过）。解决方案依赖于在图表中创建一个与X轴上的类别数相同的“隐藏序列”

首先，您需要在Highcharts选项对象中将图表选项设置为true。然后，在创建序列时，将序列的选项设置为false（或者，您可以在创建序列时调用该序列），并将序列的选项也设置为false

下面是一个JSFIDLE，它显示了以下效果：。这把小提琴是从中提供的例子分支出来的

为了快速参考，这里是fiddle的javascript代码。请注意，隐藏序列数据数组中的0数与xAxis上的类别数相同

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

现在，不完全符合要求，因为在x轴下有类别标签，它们不会出现在屏幕截图中。在这种情况下，只需为类别标签提供空字符串，并完全消除记号（将xAxis选项中的和设置为0）即可实现相同的效果

下面是jsfiddle，它显示了：以及来自fiddle的javascript代码：

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        legend: {enabled:false},
        xAxis: {
            categories: ['Series 1', 'Series 2', '', '', '', '', '', '', '', '', '', ''],
            minorTickLength:0,
            tickLength:0
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

从这里，您可以通过调整类别的数量和/或调整之前参考的可用间隔选项来调整x轴延伸的长度

---

我希望这有帮助

在数据中添加一些空值在数据中添加一些空值它工作！我尝试使用max设置，但不熟悉标签格式化程序。美好的没问题。咖啡脚本看起来很有趣。答案不被接受，因为我发现这会导致列之间的距离变得更近。每个列宽变小，标签重叠。您需要修改列宽和间距以适应所需的输出。同时删除

spacingRight

。它可以工作！我尝试使用max设置，但不熟悉标签格式化程序。美好的没问题。咖啡脚本看起来很有趣。答案不被接受，因为我发现这会导致列之间的距离变得更近。每列宽度变小，其标签重叠