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

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

highcharts Area chart with x and y values?

javascript

highcharts

stacked-area-chart