javascript - Highcharts:带有垂直网格线的 xAxis

Question

我需要创建一个折线图，其中 xAxis 将显示垂直网格线而不是水平网格线，就像在“图表:{inverted:true}”案例中一样(下面屏幕上的示例)。

vertical gridlines effect

不幸的是，该解决方案并不完全准确，因为它也改变了数据的顺序，所以实际上距离标尺最终出现在图表的一侧，而它应该位于图表的底部，如下所示:

proper data order but with horizontal gridlines

我的问题是:有没有办法在不切换数据顺序的情况下使网格线垂直显示？

这是 Highcharts 演示中的示例图表，我想在其中更改网格线的显示:

$(function () {
$('#container').highcharts({
    chart: {
        type: 'spline',
        inverted: false
    },
    xAxis: {
        reversed: false,
        labels: {
            formatter: function () {
                return this.value + 'km';
            }
        },
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        },
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Temperature',
        data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
    }]
});

PS 我不想篡改传递给函数的数据的顺序。

Answer 1

您是否考虑过使用 xAxis.gridLineWidth 和 xAxis.gridLineColor 参数？ http://api.highcharts.com/highcharts/xAxis.gridLineWidth http://api.highcharts.com/highcharts/xAxis.gridLineColor

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'spline',
      inverted: false
    },
    xAxis: {
      reversed: false,
      gridLineWidth: 1,
      labels: {
        formatter: function() {
          return this.value + 'km';
        }
      },
    },
    yAxis: {
      title: {
        text: 'Temperature'
      },
      gridLineWidth: 0,
      labels: {
        formatter: function() {
          return this.value + '°';
        }
      },
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Temperature',
      data: [
        [0, 15],
        [10, -50],
        [20, -56.5],
        [30, -46.5],
        [40, -22.1],
        [50, -2.5],
        [60, -27.7],
        [70, -55.7],
        [80, -76.5]
      ]
    }]
  });
});

在这里你可以看到一个例子它是如何工作的: http://jsfiddle.net/r3wd8j7t/1/