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 轴是由分类桶（如名义变量）还是连续线（如日期或数字范围，其中许多或大多数 "ticks" 在线将不会'他们没有数据点）。听起来您的用例需要后者。您是否查看过 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 库。尝试那里发布的解决方案之一。

Highcharts 阶梯线与间隙和系列如 [x,y]

Highcharts step line with gaps and series like [x,y]

javascript

jquery

highcharts