Highcharts 组合图表区域范围未显示在图表上，但折线图有效答案

【问题标题】：Highchart Combination Chart Area Range not displaying on chart but line chart worksHighcharts 组合图表区域范围未显示在图表上，但折线图有效
【发布时间】：2020-11-05 11:26:02
【问题描述】：

我正在尝试在一个组合图表上创建一个包含两个折线图的区域范围图。两条线都在工作，但我的图表上没有显示区域范围，无法弄清楚原因。

我有一个 ajax 请求，它从 SQL 中检索我的数据并作为数组存储在变量 (arealineDatas) 中。然后，对于范围系列，我检索 grpMth（名称）、Low（最小值）和 High（最大值）值并将其存储在一个新数组中，如下所示：

    let arealineDatasRange = arealineDatas.map(function (obj) {
    return {
        grpMth: obj.grpMth,
        low: obj.min5Yr,
        high: obj.max5Yr,

    }
});

下面是我的highchart配置

$('#container').highcharts({
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: arealineDatas.map(item => item["grpMth"])
        },
        series: [{
            name: '5 Year Range',
            data: arealineDatasRange,
            type: 'arearange',
            id: 'Results1',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0,
            marker: {
                enabled: false
            }

        },

            {
                name: '2019',
                data: arealineDatas.map(item => item["lastYear"]),
                turboThreshold: 0,
                id: 'Results2',
                type: 'line',
            },
            {
                name: '2020',
                data: arealineDatas.map(item => item["thisYear"]),
                turboThreshold: 0,
                id: 'Results3',
                type: 'line',
            }],

    });

我的图表正在生成去年和今年的折线图。但是没有显示区域范围。我试着按照这个例子：https://jsfiddle.net/96a3hLud/ 示例中的 var 范围变量是我格式化 arealineDatasRange 的方式。

arealineDatasRange 的控制台日志输出：

    Array(12)
0: {grpMth: "Jan", low: 3882915, high: 61245507}
1: {grpMth: "Feb", low: 3963321, high: 57318985}
2: {grpMth: "Mar", low: 3870268, high: 59444925}
3: {grpMth: "Apr", low: 5484951, high: 51841962}
4: {grpMth: "May", low: 5706911, high: 56609542}
5: {grpMth: "Jun", low: 5726464, high: 55464485}
6: {grpMth: "Jul", low: 5665525, high: 57753335}
7: {grpMth: "Aug", low: 5548940, high: 49578796}
8: {grpMth: "Sep", low: 5037415, high: 51153701}
9: {grpMth: "Oct", low: 4133697, high: 58165233}
10: {grpMth: "Nov", low: 3853243, high: 58245494}
11: {grpMth: "Dec", low: 4287807, high: 64072150}
length: 12
__proto__: Array(0)

【问题讨论】：

标签： jquery highcharts

【解决方案1】：

我复制了您的代码，如果 arealineDatasRange 的输出与您共享的区域相同，则应该正确呈现该区域。

看看这个演示：https://jsfiddle.net/BlackLabel/0bc6euq4/

Highcharts.chart('container', {
  title: {
    text: 'Combination chart'
  },
  xAxis: {
    categories: arealineDatas.map(item => item["grpMth"])
  },
  series: [{
      name: '5 Year Range',
      data: arealineDatas,
      type: 'arearange',
      id: 'Results1',
      lineWidth: 0,
      linkedTo: ':previous',
      color: Highcharts.getOptions().colors[0],
      fillOpacity: 0.3,
      zIndex: 0,
      marker: {
        enabled: false
      }
    }
  ],
});

【讨论】：