javascript - Highcharts 阶梯线带有间隙和系列，如 [x,y]

Question

我正在尝试在 Highcharts 中生成类似于此的线图:

|---------------|
     |-----|
          |--------------|
                                    |-------|
                                        |------|

样本系列数据具有以下形状:

[{"name":"AA01", "data": [[1423102786000,37],[1423102786000,37],[1423124408000,118],[1423124408000,118],[1423139198000,0],[1423139198000,0],[1423139305000,0],[1423139305000,0],[1423139305000,48],[1423139305000,48],[1423142136000,15],[1423142136000,15],[1423147902000,37],[1423147902000,37],[1423153292000,0],[1423153292000,0],[1423461724000,43],[1423461724000,43],[1423461724000,89],[1423461724000,89],[1423461724000,52],[1423461724000,52],[1423461724000,4],[1423461724000,4],[1423461724000,5],[1423461724000,5],[1423480654000,10],[1423480654000,10],[1423480953000,0],[1423480953000,0]]}]

x 轴是整数，y 轴是日期。正如您所看到的，所有数据点都是成对出现的，从而得到上面的布局:y 轴上的值连续两次相同，而仅在 x 轴日期上发生变化。我已经通过一些链接来实现此目的，但没有成功:

Link1

Link2

Link3

如您所见，这些示例与我的代码之间的主要区别是我没有固定的类别轴，这迫使我将系列数据添加为 [x,y]对。我尝试过类似 [x,null] , [null,null]只是null但所有这些都产生了意想不到的结果，主要是 x 轴标签(显示为初始标签 01-01-1970 )和缩放问题(当我放大带有点的区域时，它突然出现在 01-01-1970 周围)。这让我认为 Highcharts 假设 01-01-1970当日期为空时，这会弄乱整个图表。这是我的代码，尽管它很简单:

function plot(unit, data) {
                $("#chart" + unit).highcharts({
                    credits: {
                        enabled: false
                    },
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: unit
                    },
                    xAxis: {
                        title: {
                            text: 'Date'
                        },
                        type: 'datetime',
                        labels: {
                            format: '{value:%Y-%m-%d}',
                            rotation: 45,
                            align: 'left'
                        },
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Event number'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + convertDate(new Date(this.x)) + '</b><br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    //plotOptions: {},
                    series: data
                });
            }//END_FUNCTION

有人可以帮忙吗？

Answer 1

嗯，你是说你的数据在形成 [x, y] 对时效果不佳，但在我看来，每个点都有 2 条数据:日期 (x)和另一个整数 (y)。我记得 Highcharts 需要明确告知您的 X 轴是由分类桶(如名义变量)还是由连续线(如日期或数字范围)组成，其中线上的许多或大多数“刻度”不会有为他们提供的数据点)。听起来您的用例需要后者。您是否查看过 Highcharts 的文档来了解其中的差异？

看一下这个示例图表:http://www.highcharts.com/demo/spline-irregular-time/grid在源代码中，请注意 X 轴的以下指定:

xAxis: {
  type: 'datetime',
},

另请注意，当您向下滚动到为该图表定义的数据点(仍在源中)时，您可以看到他们必须为每个数据点专门创建一个 JS Date 对象。由于您的日期间隔不规则，因此您可能必须执行相同的操作:

series: [{
  name: 'Winter 2007-2008',
  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  data: [
      [Date.UTC(1970,  9, 27), 0   ],
      [Date.UTC(1970, 10, 10), 0.6 ],
      [Date.UTC(1970, 10, 18), 0.7 ],
      [Date.UTC(1970, 11,  2), 0.8 ],

如何在 Highcharts 中设置甘特图是完全不同的事情。我没有这方面的经验，但我在网上看到过一些优雅的例子，所以希望这不会造成太大麻烦。

祝你好运!