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个数据：date（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库中。尝试在那里发布的解决方案之一。

具有间隙和系列的Highcharts步骤线，如[x，y]

2 个答案: