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

【问题标题】：highcharts Area chart with x and y values?带有x和y值的highcharts面积图？
【发布时间】：2019-04-07 10:28:57
【问题描述】：

我尝试使用面积图创建此图表，但无法使用：

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

谢谢。

【问题讨论】：

标签： javascript highcharts stacked-area-chart

【解决方案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

【讨论】：