高线图显示刻度号,而不是日期

问题描述 投票:0回答:1

我正在尝试根据从Web API接收的JSON创建图形。

我让它正常工作,然后决定开始重构。过了一会儿,我突然发现xAxis不再显示日期,而是显示刻度线。我对JavaScript缺乏经验,对highcharts则更没有经验,所以我无法发现自己​​的错误。

High Charts showing ticks.(来源:mortentoudahl.dk

我所做的更改是制作一个选项对象,并根据在此处找到的说明将其在实例化时传递给highcharts:http://www.highcharts.com/docs/getting-started/how-to-set-options当我将我的代码与该链接中的最后一个代码块进行比较时,除了options对象外,它似乎是相同的。

var pm10 = [];
var pm25 = [];


var options = {
  chart: {
    zoomType: 'x',
    renderTo: 'container'
  },
  title: {
    text: "Compounds in the air at HCAB"
  },
  subtitle: {
    text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : "Pinch the chart to zoom in"
  },
  xAxix: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'µg/m³'
    }
  },
  series: [{
    name: 'Particles less than 2.5 µm',
    data: pm25,
    pointStart: Date.UTC(2016, 5, 8),
    pointInterval: 86400 * 1000 // One day
  }, {
    name: 'Particles less than 10 µm',
    data: pm10,
    pointStart: Date.UTC(2016, 5, 8),
    pointInterval: 86400 * 1000 // One day
  }]
};

function ReverseAndSetArrays(data) {
  $.each(data.reverse(), function(key, value) {
    if ("PM10b" in value) {
      pm10.push(value["PM10b"]);
    };
    if (!("PM10b" in value)) {
      pm10.push(null);
    };
    if ("PM25b" in value) {
      pm25.push(value["PM25b"]);
    };
    if (!("PM25b" in value)) {
      pm25.push(null);
    };
  });
};

var url = "super secret url";
$.getJSON(url, function(data) {
  ReverseAndSetArrays(data);
  var chart = new Highcharts.Chart(options);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
javascript ajax highcharts
1个回答
1
投票

选项对象中的以下配置不正确:

 xAxix: {
    type: 'datetime'
 }

应该是:

 xAxis: {
    type: 'datetime'
 }
© www.soinside.com 2019 - 2024. All rights reserved.