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

Question

我尝试使用面积图创建此图表，但无法使其工作:

这是 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'
        }]
    });
});

谢谢。

Answer 1

您将需要自定义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