Javascript Highcharts几个月数据为空的时间序列组合图

我正在尝试使用highcharts api开发一个多轴组合图，其中x轴为月份，y轴为多个月份，2轴为百分比，1轴为数字。这与你在这张照片中看到的相似。当您拥有所有12个月的y轴数据时，此功能可以正常工作。在某些情况下，缺少几个月的y轴数据。在这种情况下，我仍然希望在没有数据的x轴上显示月份。目前，如果我只有2个月（比如6月和12月）的y轴数据，它将显示为1月和2月的数据。请找到我正在使用的代码，并让我知道这个问题的解决方案

var chartMonthlyData = {
                  title: {
                      text: ''
                  },
                  xAxis: [{
                      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                      crosshair: true
                  }],
                  yAxis: [{
                    min: 0,
                    max: 50,
                    labels: {
                          format: '{value} %'
                      },
                    title: {
                          enabled: false
                      },
                    opposite: true
                  }, {
                      title: {
                          text: '',
                      },
                      labels: {
                        formatter: function () {
                                return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            }
                      }
                  }, {
                      min: 0,
                      max: 50,
                      title: {
                        enabled : false
                      },
                      labels: {
                          enabled: false
                      },
                      opposite: true
                  }],
                  tooltip: {
                      shared: true
                  },
                  legend: {
                      layout: 'horizontal',
                      align: 'right',
                      x: -30,
                      verticalAlign: 'top',
                      y: -5,
                      floating: true,
                      backgroundColor: '#FFFFFF'
                  },
                  series: [{
                      color: '#C8102E',
                      name: 'Delivered',
                      type: 'column',
                      yAxis: 1,
                      data: deliveredMonthly,
                      tooltip: {
                            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
                             + '{point.y}' +'</b><br/>'
                      }
                  }, {
                      color: '#AAAAAA',
                      name: 'Open Rate',
                      type: 'line',
                      yAxis: 2,
                      data: openRateMonthly,
                      lineWidth: 4,
                      marker: {
                          enabled: true,
                          "symbol": "circle"
                      },
                      tooltip: {
                          valueSuffix: ' %'
                      }
                  }, {
                      color: '#5891c8',
                      name: 'Clickthrough Rate',
                      type: 'line',
                      data: clickThroughRateMonthly,
                      lineWidth: 4,
                      marker: {
                          enabled: true,
                          "symbol": "circle"
                      },
                      tooltip: {
                          valueSuffix: ' %'
                      }
                  }]
          }

var chartMonthlyData={
标题：{
文本：“”
},
xAxis：[{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
十字准星：对
}],
亚克斯：[{
分:0,，
最高：50，
标签：{
格式：“{value}%”
},
标题：{
已启用：false
},
相反：对
}, {
标题：{
文本：“”，
},
标签：{
格式化程序：函数（）{
返回此.value.toString（）；
}
}
}, {
分:0,，
最高：50，
标题：{
已启用：false
},
标签：{
已启用：false
},
相反：对
}],
工具提示：{
分享：真的
},
图例：{
布局：“水平”，
对齐：“右”，
x:-30，
垂直排列：“顶部”，
y:-5，
浮动：是的，
背景颜色：“#FFFFFF”
},
系列：[{
颜色：“#C8102E”，
名称：'已交付'，
键入：“列”，
亚克西斯:1,，
数据：每月交付一次，
工具提示：{
pointFormat:“\u25CF{series.name}:”
+“{point.y}”+”

}
}, {
颜色：“#aaaaa”，
名称：'未结利率'，
键入：“行”，
亚克斯:2,，
数据：openRateMonthly，
线宽：4，
标记：{
启用：对，
“符号”：“圆”
},
工具提示：{
值后缀：''
}
}, {
颜色：'#5891c8'，
名称：'点击率'，
键入：“行”，
数据：点击每半年一次，
线宽：4，
标记：{
启用：对，
“符号”：“圆”
},
工具提示：{
值后缀：''
}
}]
}

---

在此图像中，x轴上的实际月份为1月、6月和8月。我需要在图表中显示12个月，y轴数据与月份正确关联。

从服务器端获取正确数据或在提供给highcharts之前更新数据

data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],

将空值添加或替换为不具有与月份对应的值的数据序列，以使序列长度与类别相同

---

演示

在提供给highcharts之前，从服务器端获取正确的数据或更新数据

data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],

将空值添加或替换为不具有与月份对应的值的数据序列，以使序列长度与类别相同

---

演示

只需在xAxis对象中添加

max

参数

API参考：

示例：

---

只需在xAxis对象中添加

max

参数即可

API参考：

示例：

---

有多种方法可以格式化数据，以显示差距。可以使用二维数组：

var deliveredMonthly =[[0,4],[5,5],[7,2]], 

可以使用对象数组，设置x和y：

openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}], 

并且，您可以为缺少的数据点填充一个具有空值的一维数组

clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];

为了保证您有12个月的假期，您应该在xAxis上设置最小值和最大值

  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    crosshair: true,
    min:0,
    max:11
  }],

---

有多种方法可以格式化数据，以显示差距。可以使用二维数组：

var deliveredMonthly =[[0,4],[5,5],[7,2]], 

可以使用对象数组，设置x和y：

openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}], 

并且，您可以为缺少的数据点填充一个具有空值的一维数组

clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];

为了保证您有12个月的假期，您应该在xAxis上设置最小值和最大值

  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
    crosshair: true,
    min:0,
    max:11
  }],

---

你能把它放到JSFIDLE中吗？你能告诉我们每个系列的数据中都有什么吗？你有x&y数据吗？你能把它放在JSFIDLE中吗？你能告诉我们每个系列的数据中有什么吗？你有x&y数据吗？