0

I have a Highcharts column chart with a couple of columns.
Fiddle: http://jsfiddle.net/yishaib/emX5T/

The design calls for the x-axis to extend to the right, far beyond the last column. Any ideas how I would do that?

This is what I'm aiming for:

enter image description here

coffee script:

$("#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
4

2 回答 2

2

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

首先，您需要在 Highcharts 选项对象中将图表的chart.ignoreHiddenSeries选项设置为 true。然后，当您创建系列时，将系列的可见选项设置为 false（或者，您可以在创建系列时调用系列的hide()）并将系列的showInLegend选项也设置为 false。

这是一个显示效果的 jsFiddle：http: //jsfiddle.net/8PpDN/1/。这个小提琴是从API 文档中提供的chart.ignoreHiddenSeries示例分支出来的。

为了快速参考，这里是小提琴的 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 选项中的minorTickLength和tickLength设置为 0）以达到相同的效果。

这是 jsfiddle 显示：http: //jsfiddle.net/BMncj/1/以及小提琴中的 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 轴扩展的长度。

我希望这有帮助！

于 2013-11-01T14:51:56.457 回答
2

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

你将不得不做这样的事情。请注意，标签格式化程序不起作用（我不熟悉咖啡脚本），但基本思想就在那里。您首先需要设置要显示的类别数量max: xxxx。这将扩展 xAxis。然后您可能想要隐藏那个“5”，因此您需要使用标签格式化程序功能。

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0
  max: 5
  labels:
    formatter: function() {
                if (this.value <> 5) {
                    return this.value;
        }
            }
于 2013-10-22T15:57:24.483 回答