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

【问题标题】：Highcharts time series combo graph where few months data is null几个月数据为空的 Highcharts 时间序列组合图
【发布时间】：2017-09-25 21:13:16
【问题描述】：

我正在尝试使用 highcharts api 开发一个多轴组合图，x 轴为月份，多个 y 轴，2 个轴具有百分比，1 个轴具有数字。这与您在link 中看到的类似。当您拥有所有 12 个月的 y 轴数据时，这可以正常工作。在某些情况下，几个月的 y 轴数据丢失。在这种情况下，我仍然想在 x 轴上显示没有数据的月份。目前，如果我只有 2 个月的 y 轴数据（比如 6 月和 12 月），它将显示为 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 轴数据与月份正确关联。

【问题讨论】：

你能把这个放在 jsfiddle 里吗？
你能告诉我们每个系列的数据是什么吗？你有 x & y 数据吗？

标签： javascript highcharts timeserieschart

【解决方案1】：

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

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

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

Fiddle演示

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

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

【讨论】：