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 中设置甘特图是完全不同的事情。我没有这方面的经验，但我在网上看到了一些优雅的例子，所以希望这不会造成太大的麻烦。

祝你好运！

Answer 2

user request 用于将甘特图添加到 Highcharts 库。尝试那里发布的解决方案之一。