在不均衡月份的高图表中显示月度月报。

Question

我需要将这个月与上个月进行对比。我遇到了麻烦，因为月份的持续时间是不均匀的。对于本月的每一天，我想显示上个月同一天的值（01.1月=01.2月），反之亦然（31.1月=月底，也就是29.2月）。

例如：对于2020年1月，我想显示31天。

Fom 2020年2月，我想显示29天，但即使2月不存在这类日期，也要保持这条线不动。

所以工具提示会是这样的。

• 29. 02. 2020 = 上月值(29. 01), 本月值(29. 02)
• 30.02.2020 = 应该显示为 "第30个值 "或类似的东西；上个月的值(30.01)，这个月的值(29.02)
• 31.02.2020 = 应该显示为 "第31次值 "或类似的东西；上个月的值(31.01)，这个月的值(29.02)

var test_data_last_month = [[Date.UTC(2020,0,1),0],[Date.UTC(2020,0,2),155752],[Date.UTC(2020,0,3),245224],[Date. UTC(2020,0,4),313143],[Date.UTC(2020,0,5),454540],[Date.UTC(2020,0,6),715791],[Date.UTC(2020,0,7),715791],[Date.UTC(2020,0,8),715791]。 UTC(2020,0,8),715791],[Date.UTC(2020,0,9),988655],[Date.UTC(2020,0,10),1026435],[Date.UTC(2020,0,11),1332754],[Date. 世界协调时(2020,0,12),1567388],[Date.UTC(2020,0,13),1940597],[Date.UTC(2020,0,14),1940597],[Date. 世界协调时(2020,0,15),1940597],[Date.UTC(2020,0,16),2081828],[Date.UTC(2020,0,17),2213635],[Date. UTC(2020,0,18),2255751],[Date.UTC(2020,0,19),2395119],[Date.UTC(2020,0,20),2876209],[Date.UTC(2020,0,21),2876209],[Date.UTC(2020,0,21),2876209]。 世界协调时(2020,0,22),2876209],[Date.UTC(2020,0,23),2988469],[Date.UTC(2020,0,24),32201548],[Date.UTC(2020,0,25),3260514],[Date. UTC(2020,0,26),3581301],[Date.UTC(2020,0,27),3817162],[Date.UTC(2020,0,28),3817162],[Date.UTC(2020,0,29),3817162]。[世界协调时(2020,0,30),4195778],[世界协调时(2020,0,31),4593995]]

var test_data_this_month = [[Date.UTC(2020,1,1),76095],[Date.UTC(2020,1,2),83687],[Date.UTC(2020,1,3),320969],[Date.UTC(2020,1,4),320969],[Date.UTC(2020,1,5),320969],[Date.UTC(2020,1,6),501655],[Date. UTC(2020,1,7),631921],[Date.UTC(2020,1,8),691171],[Date.UTC(2020,1,9),805063],[Date.UTC(2020,1,10),805063],[Date.UTC(2020,1,10),805063]。 世界协调时(2020,1,11),805063],[Date.UTC(2020,1,12),805063],[Date.UTC(2020,1,13),1043119],[Date.UTC(2020,1,14),1043119],[Date. UTC(2020,1,14),1311065],[Date.UTC(2020,1,15),1400422],[Date.UTC(2020,1,16),1778001],[Date.UTC(2020,1,17),2084701],[Date.UTC(2020,1,18),2084701],[Date.UTC(2020,1,19),2084701],[Date. UTC(2020,1,23),0],[Date.UTC(2020,1,24),0],[Date.UTC(2020,1,25),0],[Date.UTC(2020,1,26),0],[Date.UTC(2020,1,27),0]。[世界协调时(2020,1,28),0]，[世界协调时(2020,1,29),0]]

两个月同图

我一直在为这个问题把自己逼疯。任何帮助都是非常感激的。

Answer 1

你可以设置 x 作为连续的值以1递增（默认行为），并将日期存储为自定义属性。要以你想要的方式在工具提示中显示值，使用 tooltip.formatter 功能。

tooltip: {
  shared: true,
  formatter: function() {
    var points = this.points,
      series = points[0].series.chart.series,
      point,
      i = 0,
      str = '';

    for (; i < series.length; i++) {
      if (points[i]) {
        point = points[i].point;

      } else {
        point = series[i].points[series[i].points.length - 1];
      }

      str += '<span style="color:' + point.color + '">●</span> ' +
        point.series.name + ' - ' + Highcharts.dateFormat('%e. %b', point.customDate) +
        ': <b>' + point.y + '</b><br/>'
    }

    return str;
  }
},
xAxis: {
  tickPositions: [1, 11, 21, 31]
},
plotOptions: {
  series: {
    keys: ['customDate', 'y'],
    pointStart: 1
  }
},

---

现场演示。 http:/jsfiddle.netBlackLabel6m4e8x0y4986。

API参考。

https:/api.highcharts.comhighchartstooltip.formatter。

https:/api.highcharts.comhighchartsplotOptions.series.pointStart。

https:/api.highcharts.comhighchartsplotOptions.series.keys。