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],

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

Fiddle 演示

Answer 2

只需在 xAxis 对象中添加 max 参数。

API参考：
http://api.highcharts.com/highcharts/xAxis.max

示例：
http://jsfiddle.net/xkqn4qq7/

Answer 3

有多种方法可以格式化您的数据以显示间隙。您可以使用二维数组：

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
  }],

http://jsfiddle.net/v159gw36/2/

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

Highcharts time series combo graph where few months data is null

javascript

highcharts

timeserieschart