javascript - highcharts具有x和y值的面积图？

我试图用面积图创建此图，但我无法使它起作用：

这是jsfiddle：http://jsfiddle.net/okc8q0zn/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            categories: [67,69]
        },
        credits: {
            enabled: false
        },
        series: [ {
            name: '67',
            data: [24,24],
            color: '#0F0'
        }, {
            name: '69',
            data: [ 17,17],
             color: '#00F'
        }]
    });
});

谢谢。

最佳答案

您将需要自定义xAxis和yAxis以仅显示所需的值，并对系列进行一些修改，如下所示：

xAxis: {
  max: 80,
  tickInterval: 1,
  tickWidth: 0,
  labels: {
    step: 1,
    formatter: function() {
      if (this.value === 67 || this.value === 69) {
        return this.value;
      }
    }
  }
},
yAxis: {
  max: 30,
  tickInterval: 1,
  tickWidth: 0,
  gridLineWidth:0,
  labels: {
    step: 1,
    formatter: function() {
      if (this.value === 17 || this.value === 24) {
        return this.value;
      }
    }
  }
},
series: [{
  name: '67',
  data: [{
    x: 0,
    y: 17
  }, {
    x: 69,
    y: 17
  }],
  color: 'rgba(30,80,250,0.5)'
}, {
  name: '69',
  data: [{
    x: 0,
    y: 24
  }, {
    x: 67,
    y: 24
  }],
  color: 'rgba(250,250,50,0.3)'
}]

Fiddle