Javascript Highcharts/Highstocks：如何手动设置X轴范围

我正在尝试手动设置x轴范围。因此，我的x轴需要是小时/分钟的格式，并且应该是从0小时到48小时，将每个刻度增加15分钟，使其为0,15,30,45,1:00,1:15,1:30,1:45,2:00。。。。。至48:00

我不确定如何做到这一点，我正在从外部Json文件中提取数据

在我的JavaScript中，以下是我所拥有的

$(function () {

            $.getJSON('JsonFile.json', function (data) {

                var processedData = [];
                Highcharts.each(data, function (d) {
                    processedData.push(d.X);
                });

                // Create the chart
                $('#container').highcharts('StockChart', {
                    rangeSelector: {
                        selected: 1
                    },

                    title: {
                        text: 'X'
                    },

                    series: [{
                        data: processedData,
                        pointStart: Date.UTC(2010, 1, 1),
                        pointInterval: 1000 * 60 * 15 // Every 15 minute. 1000 miliseconds in 1 second, 60 seconds for 1 minute.
                    }],

                    xAxis: {
                         floor: 0,
                         ceiling: 1000 * 60 * 60 * 48,
                         type: 'datetime',
                         dateTimeLabelFormats: {
                         hour: '%H:%M'
                        }
                    }

                });
            });

        });

按照现在的方式，它不会绘制图形，而是给我一个空的图形，如图所示

更新2 我更新了小提琴，在48小时的时间跨度内传播任意数量的数据点。要每隔15分钟放置一个勾号标签，您可以将

勾号间隔：1000*60*15

添加到xAxis选项中。但是，如果没有足够的可用空间，Highcharts将不会呈现所有标签（即使指定了此设置，也可能会非常混乱，请参见）

有关详细信息，请参阅

---

---

别忘了查看，它们可能非常有用：-）

您可以使用

xAxis.labels.formatter

，例如：

提及

---

当然，您可以修改返回的内容，例如，如果

hours==0

等，您可以删除

hours

。

创建图表后是否要更新轴？您需要什么值类型？我希望在加载页面时它具有固定的初始轴。X轴应从0开始，递增15分钟，一直到48小时，如0，00:15，00:30，00:45，01:00，01:15。。。。。48:00. 他们应该在几小时和几分钟内到达@adidarachi，我的问题附有一张图片，现在是这样的-它没有画出正确的答案graph@axchink你能提供你的JsonFile.json的结构吗？{“Measure”：###，“Measure2”：##，}，{“Measure2”：###，}，{“Measure2”：###，}，{“Measure2”：###，}，{“Measure2”：#####，}，{“Measure2”：###，，}，{“Measure2”：###，，“Measure2”：###，}@axchink这并没有真正的帮助，对不起。如果数据对象的属性实际上被称为“measure1/2”，那么将d.X推到processedData应该不起作用。console.log（）是你的朋友。另外，你看过我更新的答案了吗？它没有加载，因为

pointStart

是

Date.UTC（2010,1,1）

->

1264982400000

，而

天花

设置为

1000*60*60*48

->

17280000

。这意味着您在xAxis上的最大值低于系列中的第一个点：）Fus，谢谢，您的代码可以工作，但在x轴上，我可以得到从24:00到216:00的值范围。有什么方法可以从0:00到48:00？另外，你能解释一下var分钟和天数代码行在做什么吗？我没有遵循它，特别是var天代码行。尝试输入“下限：0”，“上限：1000*60*60*48”，也许你有很多点？如果没有实时演示，很难说。创建JSFIDLE（例如更新我的）我们会考虑这个问题。这些行从时间戳中检索分钟数和天数。我强烈建议阅读我发布的参考。我已经更新了您的JSFIDLE。确实有太多的数据值（899点）要适应48小时/15，与899个数据相比，大约是192个点。每个点不必每15分钟运行一次点循环，这样899个数据就必须适应48小时。因此，每个数据点必须每3.2分钟运行一次。但最好是每15分钟标记一次x轴刻度。然后我我想你应该根据两点之间的距离来改变

pointInterval

。现在你已经设置了15分钟，如果你有更多的点，计算该距离，然后设置。

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function(){
      var minutes = Highcharts.dateFormat('%M', this.value),
          days = parseInt(Highcharts.dateFormat('%d', this.value)) - 1,
          hours = days * 24 + parseInt(Highcharts.dateFormat('%H', this.value));

      return hours + ':' + minutes;
    }
  }
}