Question

我有一张Highcharts图表，其中设置了最大x轴值。可以在以下网址看到：

我想要做的是为我的最大x轴设置标签。因此，在我的图表末尾显示100时，我希望能够将其设置为随机字符串，例如butterfly。我的x轴值设置为category，所以我不在乎x轴显示数字。

我的JavaScript代码是这样的：

$('#container').highcharts({
    xAxis: {
        type: 'category',
        max: 100
    },
    series: [{
        data: [0, 1, 56, 32]
    }]
});

不确定Highcharts中是否有允许我这样做的功能。

我想要实现这一目标的另一个选择是写出每个类别。就像我在这里：

http://jsfiddle.net/7N8he/29/

然而，我希望实现这一点的方法不那么冗余，因为我只想改变尚未到达末尾的系列的最后x轴值（即最大x轴）。您将注意到，在我的两个示例中，数据点都没有到达x轴。

Answer 1

你可以这样做

  chart: {
    events: {
      load: function() {
        //console.log(this.xAxis[0])
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";  //update last element of array

        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1 //update chart max value to number of element in category array
          }
        })
      }
    }
  },

注意整页演示将正确显示

$('#container').highcharts({
  chart: {
    events: {
      load: function() {
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";
        //console.log(this.xAxis[0])
        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1
          }
        })
      }
    }
  },
  xAxis: {
    type: 'category',
    max: 100
  },

  series: [{
    data: [0, 1, 56, 32]
  }]

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

Fiddle演示

Highcharts将标签分配给x轴最大值

1 个答案: