javascript - Highcharts 时间序列组合图，其中几个月的数据为空

Question

我正在尝试使用 highcharts api 开发一个多轴组合图，其中 x 轴为月份，y 轴为多个，其中 2 个轴具有百分比，1 个轴具有数字。这与您在 link 中看到的类似。 。当您拥有所有 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: ' %'
                      }
                  }]
          }

在此图中，x 轴的实际月份是一月、六月和八月。我需要在图表中显示 12 个月，并将 y 轴数据与月份正确关联。

Answer 1

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

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

向没有与月份对应的值的数据系列添加或替换 null，以使系列长度与类别相同

Fiddle演示